6 лучших практик CSS
CSS - одна из самых простых для изучения технологий, поэтому мы его часто недооцениваем. Писать CSS профессионально и эффективно в больших проектах сложнее, чем кажется. В этой статье собраны 6 лучших практик CSS, которые следует взять на вооружение для создания более качественного и читабельного CSS.
Держите все организованно
Трудно понять, что вы хотите стилизовать, когда не знаете, как будет выглядеть HTML-каркас. Вот почему не следует писать CSS параллельно с HTML. Не стилизуйте заголовок, пока вы его пишете.
Вместо этого сначала напишите HTML. После этого у вас будет гораздо более четкое представление о том, как вы хотите оформить компоненты вашего сайта. Если вы сделаете это вместо того, чтобы писать CSS вместе с HTML, вы сэкономите огромное количество времени на переписывании.
Кроме того, после написания HTML обязательно организуйте таблицу стилей во время написания CSS. Это можно сделать разными способами, но вот два из них:
- Начните со стилизации по умолчанию, определите полезные классы, которые вам понадобятся, а затем добавьте основной макет страницы: заголовок, основное содержание, нижний колонтитул и т.д. Только после этого добавьте CSS для конкретных вещей.
- В качестве альтернативы, идите сверху вниз по сайту. От общего вида к заголовку, навигационному меню, основному содержанию и так далее, пока не дойдете до подвала сайта.
И последнее замечание: если вы работаете над большим проектом, разбивайте большие таблицы стилей на более мелкие. Пусть один css-файл содержит все глобальные правила, а меньшие css-файлы стилей содержат конкретные правила. Или разные css-файлы для вашего блога и статических страниц. Неважно, как вы их разделите, главное, чтобы они были аккуратно организованы и имели правильные перекрестные ссылки.
Сделайте понятно
CSS достаточно понятен и, кажется, не требует комментариев. Но не потому, что синтаксис легко читается, люди (включая ваше будущее "я") будут разбираться, что вы делали.
Вот почему вам нужно добавлять комментарии к конкретным решениям, которые вы принимаете в вашей каскадной таблице стилей. Объясните свои рассуждения. Добавьте ссылки на учебники, если речь идет об особо хитрых элементах CSS. То, что кажется очевидным, когда вы пишете CSS, возможно, не будет таковым через месяц.
Кроме того, используйте комментарии для разделения логических разделов в таблице стилей. Например комментарии /* || Общие стили */, /* || Типографика */, и /* || Цвета */ могут значительно облегчить чтение css. Убедитесь, что между этими разделами достаточно свободного пространства.
Будьте кратки
Используйте сокращенные свойства CSS везде, где это возможно. Это особенно верно для border, margin, padding и background, но это относится и к другим свойствам. Например, не пишите шестнадцатеричный код #FFFF00, когда его можно написать как #FF0. Какой из двух приведенных ниже примеров вам больше нравится:
/* Пример №1 */
.container-1 {
background-color: #FF0;
background-image: url(.css.png);
background-repeat: no-repeat;
background-position: center;
}
/* Пример №2 */
.container-2 {
background: #FF0 url(.css.png) no-repeat center;
}Если вы хотите, чтобы ваш CSS был кратким, вспомните один из важнейших принципов чистого кода: "Не повторяйся" (DRY - Don't repeat yourself). Подумайте об этом:
/* Пример */
.problem {
width: 60%;
height: 60px;
background: #FF0;
border-radius: 3px;
}
.problem--big {
width: 60%;
height: 60px;
font-size: 1.5em;
background: #FF0;
border-radius: 3px;
box-shadow: 1px 2px 5px #CCC;
}
/* Тот же самый пример, но с соблюдением DRY */
.problemo {
width: 60%;
height: 60px;
background: #FF0;
border-radius: 3px;
}
.problemo--big {
font-size: 1.5em;
box-shadow: 1px 2px 5px #CCC;
}CSS в последней части чище и короче. В вашем HTML просто нужно добавить дополнительный класс, так что пишем class="problemo problemo--big" вместо class="problemo--big".
Используйте сброс css-стилей по умолчанию
К большому разочарованию многих веб-разработчиков, разные браузеры имеют несколько разные способы отображения информации. Ваш сайт, который выглядит одним образом в Chrome, может выглядеть по-другому в Internet Explorer. Шрифты могут не отображаться, некоторые функции могут не работать, высота строк может отличаться и т.д.
Вот почему необходимо сбрасывать стандартные css-свойства браузеров. Это уменьшит несоответствия между браузерами, переопределяя стили браузера по умолчанию. Хорошая таблица стилей будет явно задавать стили для большинства элементов HTML.
Существует широкий выбор таблиц стилей сброса CSS. Два популярных варианта - это Eric Meyer's CSS reset и Yahoo! Reset. Кроме того, вы можете создать собственную таблицу стилей, например, такую простую:
* {
padding: 0;
margin: 0;
border: 0;
}Будьте проще с цветами
Убедитесь, что вы соблюдаете последовательность в выборе цветов. Выберите цвета своего фирменного стиля и не отходите от них. Вам не нужно тринадцать оттенков красного. Будьте осторожным, объявляя цвета с помощью rgba() или hsla(), потому что эти цвета будут меняться в зависимости от фона. Вместо этого используйте шестнадцатеричный код.
Хотя плагины IDE помогают визуализировать, какой шестнадцатеричный код соответствует тому или иному цвету, также полезно добавить ссылку на цвет, чтобы люди, читающие ваш код, знали, какие цвета вы будете использовать в таблице стилей.
Не будьте слишком конкретны
Если вы слишком конкретизируете свои селекторы, то в конечном итоге вы будете повторяться. Рассмотрим следующее:
/* Слишком специфично */
article.main p.box {
border: 1px solid #fff;
}
/* Лучше */
.box {
border: 1px solid #fff;
}Первый вариант работает только для абзаца с классом box внутри статьи с классом main. Это слишком специфично. Селектор .box работает одинаково хорошо.
То же самое относится к любому селектору ID. Поскольку селекторы ID уже являются наиболее специфичными селекторами, нет необходимости писать ul#nav, когда #nav будет работать точно так же. Хорошее эмпирическое правило - писать селекторы CSS с минимальной степенью специфичности, которая им требуется.