15 советов которые помогут вам в дальнейшем грамотно и комфортно работать с CSS

Прежде чем вы станете продвинутым CSS кодером вы должны отработать основные базовые принципы использования CSS. Я предлагаю вашему вниманию 15 советов, которые должны стать вашей привычкой и исполнение которых заложит прочный фундамент для плодотворной работы с CSS.

---

Прежде чем вы станете продвинутым CSS кодером вы должны отработать основные базовые принципы использования CSS. Я предлагаю вашему вниманию 15 советов, которые должны стать вашей привычкой и исполнение которых заложит прочный фундамент для плодотворной работы с CSS.

1 Используйте сброс стилей

Эта привычка является одной из наиболее часто упоминающихся передовых практик CSS. Целью сброса стилей CSS является уменьшение несоответствия отображения страниц в различных браузерах путем установки начальных значений для большинства HTML элементов. Это гарантирует, что ваши шрифты, высота элементов будут одинаково смотреться в различных браузерах. Кроме того сбрасываются отступы (margin, padding) для различных элементов, которые выставлены у браузеров по умолчанию.
Если хотите, можете использовать готовые решения сброса CSS стилей, например  сброс от Eric Meyer или Yahoo сброс.
2 Используйте сокращенную запись свойств CSS
Использование сокращенной записи свойств CSS позволит вам повысить оперативность при кодировании и отладки стилей, уменьшить вероятность опечаток в названиях свойств. Так же, что не мало важно, это позволит уменьшить размер вашего CSS файла.
Если правило содержит несколько свойств для одного селектора, например:

border-top: 5px;
border-right: 10px;
border-bottom: 15px;
border-left: 20px;

они могут быть записаны в одну строчку в сокращенном виде. Это будет выглядеть так:

border: 5px 10px 15px 20px;

При этом следует только запомнить порядок выставления значений для свойства. Первое число указывает значение для top и далее (по часовой стрелке) right, bottom, left.

Сокращенная запись цвета

Шесть цифр в шестнадцатеричном коде, используемом для обозначения цвета в CSS можно уменьшить до 3, если цвет состоит из одинаковых пар.
Например: #FFFFFF можно записать как #FFF , или #990055 можно записать в виде #905 , но #F091A4 не может быть сокращен так как пары, из которых он состоит, не  являются идентичными.

3 Пишите подробные комментарии при создании стилей

Возьмите в привычку писать подробные комментарии при создании стилей. Они значительно сократят время разбора стилей, если вы к ним вернетесь после длительного перерыва в работе. Так же не следует забывать про использование комментариев в CSS, если над проектом будет работать несколько человек.
Чтобы добавить комментарий в CSS, просто вставьте в код такую конструкцию:  /* Ваш комментарий */

Некоторые случаи использования комментариев в CSS

Заголовок CSS. Обычно располагается сверху CSS файла и содержит краткую информацию кем создан этот стиль, когда и для какого проекта. Так же может содержать в себе дату последнего редактирования.
Разбиение CSS кода на логические части.  С помощью комментариев можно разбить CSS код на части для удобного восприятия. Например, можно разграничить на такие части как: шапка сайта, правая/левая  колонки, основное содержание, футер и так далее.
Выглядеть это может приблизительно так:

/****************************************/
/ * Шапка сайта * /
/****************************************/

Это очень удобно, в этом вы сами сможете убедиться на практике.
Пометка о проблемах отображения. Такой пометкой можно сопровождать свойства, которые не поддерживаются во всех браузерах, например: / * проблема в IE6 * /
Пометка о зависимых свойствах. Делайте отметки рядом со свойствами, которые должны зависеть от определенных условий. Например, у вас есть блок фиксированной ширины которую, возможно, придется поменять при изменении контента. В пометке указывайте какие условия должны произойти прежде чем его необходимо будет править.

4 Добавляйте расшифровку цветов в большие CSS файлы

При работе с небольшими файлами CSS отслеживать значение цвета в шестнадцатеричном представлении не слишком сложно, но если файл становится большим, например, 2000+ линий, то становится намного сложнее отслеживать цвета и увеличивается вероятность  их перепутать.
Расшифровку цветов можете вставить внизу CSS файла, после всех стилей.
Например, выглядеть это может так:

/ * Светло-синий: #4595be
/ * Темно-синий: #367595
/ * Красный для ссылок: #9F1212
********************************/

5 Запомните особенности использования абсолютно позиционированных элементов

Абсолютное позиционирование элементов на странице обычно пугает некоторых новичков CSS. Но есть один принцип, который поможет вам разобраться в их использовании.
Когда у селектора задано свойство postition:absolute, страница рассматривается как XY-сетка и по умолчанию точка 0,0 находится в верхнем левом углу экрана. И если мы абсолютно позиционированный элемент смещаем на 10 пикселей слева и на 20 пикселей сверху, то смещение начинается от верхнего левого угла независимо от того, где этот элемент расположен в HTML разметке. Это является излишним функционалом, так как обычно требуется располагать элемент относительно какого-нибудь родительского контейнера. Чтобы сделать это необходимо просто добавить position: relative контейнеру относительно которого вы хотите позиционировать вложенный элемент. После этого точка 0,0 на XY-сетке будет находится в вершине контейнера в который помещен абсолютно позиционированный элемент.
На рисунке ниже показано, как красный контейнер позиционируется на странице в зависимости от того, есть ли у синего (родительского) контейнера position: relative или нет.

6 Избегайте использования CSS хаков

К сожалению web-разработчиков, не все браузеры одинаково отображают те или иные стили, и периодически приходится прятать определенный код от некоторых браузеров (в основном от IE6 и IE7) или наоборот делать так, чтобы некоторый код распознавался только определенным браузером. Поэтому приходится прибегать к различным уловкам, не все из которых являются оправданными. Не желательно использовать CSS хаки, поскольку они не являются стандартными решениями и главным образом основаны на недостатках браузеров. Использование этих недостатков в своих интересах, для того чтобы скрывать стили от специфичных браузеров может вызвать проблемы, так как вы не можете гарантировать, что эти ошибки не будут исправлены в будущих версиях.
Полнофункциональным решением для борьбы с некорректным отображения в IE является использование условных стилей тем более, что это решение одобрено Microsoft.

7 По возможности, используйте свойство margin при расположении блоков

Этот совет не так часто упоминается, но это поможет вам синхронизировать расположение блоков в различных браузерах без дополнительного прописывания стилей.
Основная идея состоит в том, что вместо того, чтобы добавлять к родительскому контейнеру свойство padding, вы можете добавить margin дочернему элементу, чтобы получить тот же самый результат.
Таким образом, вместо

#main-content {padding-left: 10px}

следует добавить

#main-content { }
#main-content #left-column {margin-left: 10px}

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

8 Если вы используете плавающие элементы (float) не забудьте указать для контейнера — overflow:hidden

Типичный пример:

ul {
overflow: hidden;
}
ul li {
float: left;
}

Если бы контейнер не имел overflow:hidden, то возникли бы проблемы отображения элементов, которые следуют в HTML структуре за этим контейнером. Они бы наплывали друг на друга. Многие из вас могли это видеть при использовании float-элементов, когда следующий блок вместо того, чтобы отображаться ниже, перепрыгивал с ним на один уровень.
Некоторые избавляются от такой проблемы, добавляя в HTML разметку после плавающего элемента следующее:

<div style="clear:both"></div>

Но это не совсем удобно. Во первых, написание этой конструкции занимает больше времени чем добавление overflow:hidden, а во вторых, это противоречит самой цели CSS отделения стилей от структуры страницы.

9 Используйте display:inline для плавающих элементов (float)

Эта привычка поможет вам устранить проблему двойного margin в IE6 без использования CSS хаков. Напомню вам суть проблемы IE6: этот браузер удваивает значение margin, указанное в CSS, например, значение margin:20px IE6 будет воспринимать как margin:40px.
Легко представить себе тот бардак на странице, к которому может привести эта ошибка.
Так как IE6 уже постепенно вымирает, многие разработчики уже не тратят время, чтобы сделать корректное отображение сайта в этом браузере, все же эта привычка поможет без потраченного времени улучшить отображение сайта для тех бедных людей, которые по какой-то причине все еще пользуются IE6.
Только возьмите в привычку добавлять

display: inline /* IE6 Problem */

каждый раз, когда используете свойство float.

10 Научитесь пользоваться CSS Sprites

CSS Spriters не являются новой технологией. В самом деле эта достаточно хорошо изученная техника, которая уже стала обычной практикой в веб-разработке. Конечно, нет необходимости использовать CSS Sprites везде и всегда, но в некоторых ситуациях они имеют  значительные преимущества, особенно если требуется снизить нагрузку на сервер. Если вы не слышали о CSS Sprites то самое время узнать что они из себя представляют и как использовать эту технику у себя в проектах. Чаще всего их используют для организации красивых графических меню навигации.
Принцип работы техники CSS Spriters заключается в использовании комбинированного изображение, из которого затем «вырезается» с помощью свойств background-position нужный нам в данном случае кусок. Это позволяет сократить число запросов к серверу, отделить и позволяет делать красивые решения с помощью CSS не прибегая к JavaScript.
CSS Sprites, на самом деле, — всего лишь расширенное использование технологии background, заложенной еще в спецификации CSS1.
Основные свойства, которые мы используем для задания фонового изображения.
background-image — отвечает за подгрузку фонового изображения.
background-repeat — вторая не менее важная составляющая при использовании фонового изображения. Ведь задавая no-repeat для данного свойства, мы намеренно подчеркиваем, что допустимо использование CSS Sprites для «склейки» изображений (по умолчанию используется repeat).
background-position — «волшебная палочка» для CSS Sprites, позволяющая спрятать или показать определенные части фонового изображения.

Дополнительная литература на русском языке 

CSS Sprites и их использование
CSS Sprites 2.0
CSS Sprites: все, что вы не знали, но боялись спросить

11 Используйте удобную для вас файловую структуру

Потратьте немножко времени, чтобы систематизировать все файлы, используемые для веб-проекта. Вы можете создать основную структуру файлов и папок и копировать/вставлять ее каждый раз, когда будете создавать новый проект.
Моя структура файлов приблизительно имеет такой вид, как на рисунке ниже



Папка Website Name переименовывается по названию сайта над которым я собираюсь работать. Эта папка содержит HTML, PHP файлы а так же папки assets и styles.
В assets обычно хранятся файлы большего размера. Например, файлы, которые можно будет скачать с сайта, такие как PDF, PSD и другие.
Папка styles разбита на три подпапки: CSS, Images, JavaScript в которых хранятся все CSS файлы, изображения используемые в стилевом оформлении сайта и файлы подключаемых скриптов и различных JavaScript библиотек.
Я использую эту файловую структуру для большинства моих проектов, и поэтому я точно знаю в каких случаях какие пути нужно указывать, например, при добавлении фоновых изображений в CSS и так далее. Этот подход экономит время разработки.
Кто-то может не согласиться с такой структурой и будет пользоваться своей. Это не принципиально. Главное о чем я хотел сказать, это то, что вы должны по возможности пользоваться одной выработанной, и удобной для вас файловой структурой, тогда вам не придется разбираться в хаотично разбросанных файлах, и процесс кодирования будет отработан до автоматизма.

12 Используйте отступы в CSS файлах

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

13 Используйте «px» при указании размера шрифта

Это правило горячо обсуждается веб-разработчиками. Некоторые отдают свое предпочтение фиксированному указанию размера шрифта, некоторые все же предпочитают использовать относительные значения.
Я вам посоветую использовать фиксированные значения и задавать размер с помощью «px».
Использование относительные размеров для шрифтов были хорошей идеей несколько лет назад, с их помощью посетители могли регулировать размер шрифта в браузере. Но сейчас браузеры позволяют изменять шрифт более разумно и относительное измерение шрифтов для этих целей больше не нужно.
Использование относительных размеров сейчас может создать определенные неудобства, потому что размер шрифта наследует значения родительских каскадов.
Например предположим что у нас

body { font-size: 62.5% } /*делает размер шрифта для страница равным 1em , что эквивалентно 10px.*/

Если для селектора #blog-content нам нужно установить размер 14 px, мы используем правило

#blog-content { font-size: 1.4em; }

Теперь, по логике вещей, если заголовок h3, расположенный внутри #blog-content должен иметь размер 20px мы должны написать конструкцию

#blog-content { font-size: 1.4em; }
#blog-content h3 { font-size: 2.0em }

И все бы хорошо, но именно тут-то и возникает проблема, поскольку значение 2em задается по отношению к уже указанному в #blog-content значению 1.4 em. Так что на самом деле размер шрифта заголовка становится не 20px а 28px.
Поэтому в случае использования относительными измерениями нам необходимо постоянно вести неоправданные расчеты, вместо того, чтобы просто и удобно указать фиксированный размер. Решайте сами, что вы считаете более удобным.

14 Имейте представление о проблеме применения псевдо-классов

Большинство современных браузеров не подвержены этой проблеме, но является актуальной для более старых браузеров и ее следует иметь ввиду.
Проблема состоит в том, что старые браузеры (например IE6) распознают псевдо-классы, такие как например :hover только для элемента a (ссылка).
Поэтому конструкция вроде

#header ul li:hover { background-color: #900}

Не будет работать в IE6
Необдуманное применение псевдо-классов может вызвать серьезные проблемы в функциональности сайта, если они будут применены, допустим, в меню навигации, когда выпадающее меню базируется на событии li:hover. В этом случае люди, использующие IE6 не увидят этого выпадающего списка и возникнут серьезные проблемы в навигации по сайту.
Решение может заключается в использовании JQuery для организации подобных эффектов.

15 О применении селекторов

Убедитесь в том, что ваш селектор имеет достаточный вес (специфичность) чтобы избежать не правильного отображения стилей. Это актуально потому, что на один элемент может указывать несколько правил, причем они могут противоречить друг другу. И какое правило будет использовано для отображения элемента, определяется браузером исходя из специфичности селекторов. Чем специфичнее селектор, тем выше его приоритет.

Специфичность селекторов определяется следующими правилами:

1. Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях. (это значит, вне зависимости от того, что прописано в файле стилей отображение элемента будет соответствовать стилю, прописанному в атрибуте style)
2. Второе место занимает присутствие ID в селекторе(#name).
3. Далее идут все атрибуты (в том числе и атрибут class) и псевдоклассы в селекторе.
4. Самый низкий приоритет у селекторов с именами элементов (h1, ul, div, span) и псевдоэлементами (ul li).

Например в конструкции с двумя противоречащими правилами

div span { text-decoration:underline;}
span { text-decoration:none;}

Первый селектор выигрывает у второго потому что включает в себя 2 последних правила специфичности, в то время как второй – всего одно. Чтобы убрать подчеркивание текста в данном случае, следует использовать класс или более специфичный селектор:

div span { text-decoration:underline;}
body span { text-decoration:none;}

Теперь селекторы имеют одинаковый вес (по два последних правила) касательно специфичности. В этом случае, действует последнее из описанных правил (т.е. последнее правило, полученное браузером). В нашем случае это body span { text-decoration:none;}. Поэтому такой конструкции так же будет достаточно, чтобы убрать подчеркивание.

По возможности используйте элементы-селекторы

Например, вместо того чтобы создавать дополнительный селектор для заголовка

#main-content .main-header

лучше использовать в качестве селектора название элемента

#main-content h1

Будьте внимательны при группировке селекторов

С помощью группировки селекторов можно сэкономить время, когда вы имеете дело с не относительными значениями, например

.main-content div, .main-content p {
color: #000;
}

Но группировка может вызвать проблему, когда вы будете использовать относительные значения свойств, например

.main-content div, .main-content p {
line-height: 1.3em;
}

Теперь ко всему тексту расположенному в div будет присвоено значение line-height:1.3em, но если текст внутри div будет еще помещен и в тег абзаца p, то в дополнение к уже установленному значению 1.3em высота линии этого текста получит дополнительные 1.3em.
Это основные правила которыми я руководствуюсь при работе с CSS. Надеюсь, что этот материал будет для вас полезен. Если вы пользуетесь какими-нибудь другими правилами поделитесь со всеми читателями в комментариях, они действительно будут вам благодарны.

---

Перевод: Ефимов Виктор
По мотивам: noupe.com