Повторение

У программистов существует общий принцип разработки, применяемый ко всем языкам программирования –DRY. Это аббревиатура слов «Don’t Repeat Yourself» («не повторяйся»). Суть принципа заключается в том, что любому разработчику следует уменьшать количество повторений кода. Применение DRY поспособствует уменьшению количества строк кода, улучшению его читаемости и производительности.

Вместо того чтобы прописывать три разных класса,

.content{
display: flex;
justify-content: center;
}

.semi-content{
display: flex;
justify-content: center;
}

можно записать код таким образом:

.content,
.semi-content{
display: flex;
justify-content: center;
}

Плохой нейминг

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

Что подразумевается под плохим неймингом? Например, название классов буквами или тегами, не имеющими никакого смыслового отношения к коду, которые не дадут ясного понимания ни вам, ни тем, кто будет его читать. Также не поощряется использование CamelCase (с англ. — «ВерблюжийРегистр», также «ГорбатыйРегистр», «СтильВерблюда») — стиль написания, при котором несколько слов пишутся слитно без пробелов, при этом каждое слово внутри фразы пишется с прописной буквы.

Используйте описательные имена для ваших классов, например, «.contact-form» или «.article-paragraph». Если имя состоит из нескольких слов, следует расставить дефисы между этими словами.

Использование названий цветов

CSS включает в себя поддержку стандартных наименований цветов. Их можно использовать, указав в качестве значения свойства color. Однако, одна из проблем использования имени цвета в том, что некоторые из них поддерживаются не во всех браузерах.

Другой способ задания цвета – шестнадцатеричный код, который гораздо точнее определяет цвет. Всего существует 16777216 комбинаций. Шестнадцатеричный код цвета состоит из шести символов. Например, значение #ffffff представляет белый цвет.

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

Использование px, вместо абсолютных единиц

Каждому разработчику важно знать, что, согласно спецификации, единица CSS px не равна одному физическому пикселю дисплея. Более того, если вы масштабируете веб-страницу, размер шрифтов, заданных в пикселях, не увеличится.

Абсолютные единицы em и rem гибки и масштабируемы. Они переводятся браузером в пиксельные значения в зависимости от настроек размера.

Отсутствие резервных шрифтов

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

Код без сокращений

Использование сокращенной записи для свойств может сэкономить много места. Некоторые CSS-свойства, такие как padding, margin, font и border можно описывать гораздо проще, применяя сокращенный их вариант. Этот подход помогает уменьшить количество строк в правилах.

При полном варианте записи CSS-класс выглядит так:

.article-container {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
border-width: 1px;
border-style: solid:
border-color: black;
}

а при сокращенном — так:

.article-container {
padding: 10px 15px 20px 15px;
margin: 10px 15px;
border: 1px solid black;
}

Избегайте !important

CSS-селектор !important имеет самую высокую специфичность, поэтому когда вы заставляете работать не сработавший CSS, применяя этот селектор, вы таким образом говорите браузеру – «Применить это конкретное правило с !important всегда и при любых обстоятельствах». Это нехорошо, поскольку правила CSS могут отличаться друг от друга в разных селекторах.

В данном случае отличным советом было бы просто не использовать правило !important. Обычно, после первого внедрения этого правила в код, разработчики перезаписывают его бесконечное число раз на другое правило !important. В итоге в будущем весь проект переполняется и становится очень сложным для поддержания.

Код без комментариев

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

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


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