Опубликовано автор в категориях Верстальщику.

20css_tips
Один мой хороший друг всерьез начал изучать верстку и CSS. По ходу его обучения, у него постоянно возникали вопросы, которые для меня казались очевидными. Но когда я поставил себя на его место, вспомнил свое начало познания CSS, то понял, что мои вопросы били такими же очевидными и их было, наверное, еще больше.

Поэтому, сегодня, благодаря друзьям из далекого «забугра» (источник), я хочу опубликовать 20 полезных советов, которые очень помогут начинающему CSS-кодеру.

«Настоящая радость в постижении основ» — сказал великий танцор Михаил Барышников. В CSS крепкие основы — это прочный фундамент вашего сайта. Давайте рассмотрим некоторые CSS советы, которые станут прочной основой для верстальщика.

1. Использование reset.css

По умолчанию браузеры, например Firefox и Internet Explorer, по разному интерпретируют стили из-за собственных базовых CSS. reset.css помогает сбросить дефолтные стили браузеров, что дает вам возможность начать с «чистого листа» — увидеть базовые CSS-свойства одинаково в большинстве браузеров.

Вот некоторые из наиболее часто используемых reset.css фреймворков — Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli

2. Используйте сокращения в CSS

Шорткаты в CSS дают более короткий способ описания свойств, при этом код становится чище и легче.
Вместо CSS кода такого типа:

1
2
3
4
5
6
 .header {  
       background-color: #fff;  
       background-image: url(image.gif);  
       background-repeat: no-repeat;  
       background-position: top left;   
     }

Можно написать более понятный и короткий код:

1
2
3
 .header {  
       background: #fff url(image.gif) no-repeat top left  
     }

Интересное по теме — Introduction to CSS Shorthand, Useful CSS shorthand properties

3. Понимание Class и ID

Эти два селектора часто путают новичков. В CSS, class представлен точкой «.» в то время как id соответствует символ «#». Если кратко, то id используется в стиле, который является уникальным и не повторится, а class можно использовать повторно.

Материалы по теме — Class vs. ID | When to use Class, ID | Applying Class and ID together

4.Власть <li>

<li> для списка ссылок, очень полезен, когда он правильно используется как элемент <ol> или <ul> особенно в случае создания меню.
Полезные сылки — Taming Lists, Amazing LI.

5. Забудьте <table> — попробуйте <div>

Одним из самых больших преимуществ CSS является использование <div> для достижения большей гибкости в плане оформления разметки. <div> Имеют в отличие от <table> в том, что содержание не заблокировано в <td> клеток. Большинство табличных разметок вполне реализуемы с использованием <div> и соответствующего CSS, за исключением случаев, когда мы действительно выводим табличные данные.

Ресурсы — Taming Lists, Amazing LI

6. Средства отладки CSS

Очень удобно использовать специальные инструменты для отладки CSS на стадии разработки, чтобы увидеть и исправить ошибки. Вот несколько бесплатных инструментов отладки CSS, которые вы можете использовать в браузере: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, и Firebug.

7. Избегайте лишних селекторов

Иногда ваши CSS правила могут быть значительно короче, вот например посмотрите на два варианта кода:

ul li { ... }
ol li { ... }
table tr td { ... }

Их можно сократить до следующего:

li { ... }
td { ...}

Пояснение: <li> будет существовать только в рамках <ul> или <ol> и <td> будет только внутри <tr> и <table> поэтому не нужно повторно включить их в объявления свойств.

8. Помните про !important

Любое свойство помеченное !important Будет превалировать над обычными правилами каскадирования. Будьте осторожны с ним!
Рассмотрим код:

.page { background-color:blue !important;   background-color:red;}

В приведенном выше примере, свойства background-color:blue; будет подавлять background-color:red; из-за присутствия !important. Однако данное правило не касается Internet Explorer 6, поскольку он не правильно работает с этим правилом. Подробнее об этом читайте в статье Десять приемов для приручения IE 6.

9. Замена текста изображением

Это практика часто применяется в заголовке сайта или в заголовке статьи, обычно заменяется текст между <h1>title&lt/h1>. Вот как это делается:

 h1 {  
 text-indent:-9999px;  
 background:url("title.jpg") no-repeat;  
 width:100px;  
 height:50px;  
 }

Пояснение: text-indent:-9999px; выводит текст за пределы экрана, а изображение для замены выводится через background: {...}, при этом блоку задается width и height. На всякий случай, если это возможно, добавьте свойство overflow:hidden;, что может предотвратить появление горизонтального скрола в браузере, но это касается только верстки в проекции rtl. И еще, если в блоке есть ссылка, или блок в ссылке, то не забудьте добавить text-decoration:none;.

10. Понимание CSS позиционирования

Часто новички не могу привыкнуть к правилам позиционирования. Есть хорошая статья, правда на английском, которая подробно описывает правила позиционирования. Difference Between @import and link. Если нужен перевод, то напишите в комментариях. Постараюсь опубликовать.

11. CSS @import против <link>

Есть 2 способа вызова внешних CSS файлов: с помощью @import и <link> Если вы не уверены, какой метод использовать, то можете посмотреть статью Difference Between @import and link, опять же, если нужен перевод и растолковать, то пишите в комментах.

12. Стилизация форм с CSS

Веб-формы можно легко и красиво оформить с помощью CSS. В следующих статья показано, как:
ЧитаемTable-less form, Form Garden, Styling even more form controls.

13. Получайте вдохновение

Если вы ищете красивые сайты на основе CSS для вдохновения, или просто хотите посмотреть на красивые пользовательские интерфейсы, то вот некоторые сайты, на которых выставляются достойные вещи:

Если этого мало, то вот больше 74 CSS Galleries.

14.Скругленные углы в CSS

Собственно вот пара стаей по созданию блоков с закругленными уголками на CSS:

На самом деле таких статей очень много, равно как и методов. Советую к прочтению еще эту статью Создание блоков со скругленными уголками.

15. Следите за чистотой CSS кода

Если ваш CSS код не достаточно чистый, то вы рискуете к концу верстки просто потеряться в собственном коде. Для того, чтобы вы никогда не потерялись в собственной верстке, нужно придерживаться простых, но важных вещей:

  1. Разбивайте большие CSS на части
  2. Используйте комментарии в CSS
  3. Используйте шорткаты в CSS
  4. Делайте код структурированным

Есть хорошая статья, но на английском: 12 Principles For Keeping Your Code Clean, Format CSS Codes Online.

16. Величины типографики: px VS em

На знаете что лучше использовать — px или em? Следующие статьи позволят вам лучше понять единицы типографики.

17. Таблица CSS совместимости браузеров

Мы все знаем, что браузеры по-своему интерпретируют CSS. Хорошо иметь под рукой ссылку, на таблицу или список, который показывает всю CSS совместимость для каждого браузера.

Некоторые таблицы поддержки CSS разными браузерами: #1, #2, #3, #4.

18. Многоколоночный дизайн в CSS

Есть проблемы с нормальной версткой и размещением колонок? Вот несколько статей, которые могут помочь:

19. Бесплатные CSS Редакторы

Редакторы, которые подсвечивают код, всегда лучше, чем «Блокнот». Вот некоторые весьма неплохие и популярные:

20. Понимание типов носителей (Media Types)

Существуют несколько типов носителей, которые вы добавляете, когда вставляете CSS через <link> print, projection и screen — наиболее часто используемые. Понимание и использование их должным образом улучшит юзабилити вашего проекта. Данные статьи могут помочь разобраться в этом вопросе:
CSS and Media Types, W3 Media Types, CSS Media Types, CSS2 Media Types.

Постовой:

Екатеренбург гаразд на ноу-хау, например: Керамический кирпич Екатеринбург.

9 комментариев к записи “20 полезных советов по CSS для начинающих верстальщиков”

  1. Yakov

    Вить, а чего не ссылаешься на собственные статьи? тыж вроде сам неплохо писал про скругленные углы? поскромничал?

    Ответить
    • Hiway

      Яха, ну, если честно, то проще было из закладок вытянуть статьи для примера. А я писал про ситуативные штуки, не совсем универсальные, а так сссылки на универсальные методы.

      Ответить
  2. Андрей

    Я как раз начинающий. Очень полезная статья. И конечно же очень нужен перевод Difference Between @import and link с удовольствием почитаю.

    Ответить
  3. Ax

    спасибо большое… весьма позновательно… ну и заранее спс за перевод «про различия между @import и link «, сэкономили моё время — сейчас пойду прочитаю

    Ответить

Оставить комментарий

  • (не будет показан)