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

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

Если хотите, можете использовать готовые решения сброса CSS стилей, например сброс от Eric Meyer или Yahoo сброс. Если вам мало, то прочтите статью у нас про другие виды сброса стилей

2 Используйте сокращенную запись свойств CSS
Использование сокращенной записи свойств CSS позволит вам повысить оперативность при кодировании и отладки стилей, уменьшить вероятность опечаток в названиях свойств. Так же, что не мало важно, это позволит уменьшить размер вашего CSS файла.

Если правило содержит несколько свойств для одного селектора, например:


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


При этом следует только запомнить порядок выставления значений для свойства. Первое число указывает значение для 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 файла, после всех стилей.

Например, выглядеть это может так:


5 Запомните особенности использования абсолютно позиционированных элементов
Абсолютное позиционирование элементов на странице обычно пугает некоторых новичков CSS. Но есть один принцип, который поможет вам разобраться в их использовании.

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

На рисунке ниже показано, как красный контейнер позиционируется на странице в зависимости от того, есть ли у синего (родительского) контейнера position: relative или нет.



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

Полнофункциональным решением для борьбы с некорректным отображения в IE является использование условных стилей

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

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

Таким образом, вместо


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


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

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


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

Некоторые избавляются от такой проблемы, добавляя в HTML разметку после плавающего элемента следующее:


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

9 Используйте display:inline для плавающих элементов (float)
Эта привычка поможет вам устранить проблему двойного margin в IE6 без использования CSS хаков. Напомню вам суть проблемы IE6: этот браузер удваивает значение margin, указанное в CSS, например, значение margin:20px IE6 будет воспринимать как margin:40px.

Легко представить себе тот бардак на странице, к которому может привести эта ошибка.

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

Только возьмите в привычку добавлять


каждый раз, когда используете свойство 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, позволяющая спрятать или показать определенные части фонового изображения.

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

Моя структура файлов приблизительно имеет такой вид, как на рисунке ниже


Папка Website Name переименовывается по названию сайта над которым я собираюсь работать. Эта папка содержит HTML, PHP файлы а так же папки assets и styles.

В assets обычно хранятся файлы большего размера. Например, файлы, которые можно будет скачать с сайта, такие как PDF, PSD и другие.

Папка styles разбита на три подпапки: CSS, Images, JavaScript в которых хранятся все CSS файлы, изображения используемые в стилевом оформлении сайта и файлы подключаемых скриптов и различных JavaScript библиотек.

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

Кто-то может не согласиться с такой структурой и будет пользоваться своей. Это не принципиально. Главное о чем я хотел сказать, это то, что вы должны по возможности пользоваться одной выработанной, и удобной для вас файловой структурой, тогда вам не придется разбираться в хаотично разбросанных файлах, и процесс кодирования будет отработан до автоматизма.

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


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

Я вам посоветую использовать фиксированные значения и задавать размер с помощью «px».

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

Использование относительных размеров сейчас может создать определенные неудобства, потому что размер шрифта наследует значения родительских каскадов.

Например предположим что у нас


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


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


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

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

14 Имейте представление о проблеме применения псевдо-классов
Большинство современных браузеров не подвержены этой проблеме, но является актуальной для более старых браузеров и ее следует иметь ввиду.

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

Поэтому конструкция вроде


Не будет работать в IE6

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

Решение может заключается в использовании JQuery для организации подобных эффектов.

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

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

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

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


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


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

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

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


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


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

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


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


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

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