Перевод статьи «7 Important Tips for Writing Better CSS».
Одна из самых больших проблем в программировании это необходимость заниматься поддержкой ПО. В реальной жизни мы не всегда начинаем создание программ с нуля. Гораздо чаще нам поручают проект (или мы сами беремся за него), написанный пару лет назад или даже еще раньше.
Чтобы эффективно работать над таким проектом, нам сначала нужно разобраться в исходном коде, и на этом этапе мы сразу осознаем важность чистого кода. Мы, разработчики, должны стараться писать наш код как можно более чисто.
Это касается и CSS. При написании стилей следует обращать особое внимание на некоторые вещи, и в этой статье я расскажу о самых важных из них. Надеюсь, эти 7 советов помогут вам улучшить качество вашего CSS-кода.
1. DRY
Название принципа DRY это аббревиатура слов «Don’t Repeat Yourself» («не повторяйся»). Это общий принцип разработки ПО, применимый к любым языкам программирования, а также и к CSS. Как следует из названия, принцип DRY призывает нас по возможности уменьшать количество повторов в коде.
Например, мы можем написать три разных CSS-класса для трех кнопок:
.primary-button {
background: blue;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.form-button {
background: green;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.cancel-button {
background: red;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
Или можно применить принцип DRY и единожды написать общие правила в дополнительном классе, а в классах конкретных кнопок останутся только специфические для этих кнопок правила:
.button {
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.primary-button {
background: blue;
}
.form-button {
background: green;
}
.cancel-button {
background: red;
}
Как мы видим, применение принципа DRY способствует отсутствию повторов, снижению количества строк, улучшению читаемости и даже производительности кода.
2. Нейминг
Названия CSS-селекторов это еще один важный момент при написании хорошего CSS. Имя селектора должно говорить само за себя и быть хорошо читаемым.
// Плохой нейминг
.p {
// Rules
}
.myFirstForm {
// Rules
}
Обычно <p> это HTML-тег, обозначающий абзац. В приведенном выше коде мы не можем сходу понять, что представляет из себя класс p. Также следует избегать имен вроде myFirstForm, поскольку использование camel case не поощряется.
Вместо этого используйте описательные имена (если они состоят из нескольких слов, разделяйте эти слова дефисами):
// Хороший нейминг
.article-paragraph {
// Rules
}
.contact-form {
// Rules
}
Теперь эти имена гораздо понятнее!
Нейминг в программировании это вообще нелегкое дело, поэтому и разработаны различные соглашения, которых вы можете придерживаться в своем проекте.
3. Не используйте встроенные стили
Насчет встроенных стилей до сих пор идут споры. Кто-то говорит, что их никогда не следует использовать, а кто-то считает, что в некоторых случаях это может быть полезно. Но лучшей практикой считается отсутствие встроенных стилей. Я сейчас расскажу, почему.
Разделение ответственности
Согласно принципу разделения ответственности, дизайн (CSS), контент (HTML) и логика (JavaScript) должны быть разделены. Делается это, в частности, для улучшения читаемости и поддерживаемости кода.
Включение CSS-правил в HTML-теги нарушает это правило:
<div style="font-size: 16px; color: red;">Some Text</div>
Правила стиля должны храниться во внешних CSS-файлах.
Сложности поиска
Еще одна проблема встроенных стилей — невозможность их найти. Когда нам нужно внести изменения в стили, мы обычно ищем CSS-селекторы нужного HTML-элемента.
Например, давайте изменим font-size текста нашей веб-страницы. Для этого нам сначала нужно просмотреть HTML-структуру, чтобы найти ту часть, где требуются изменения:
<div class="text-bold">Some Text</div>
Затем нам нужно найти селектор, здесь — класс text-bold. Наконец, мы отправляемся к этому классу и вносим изменения:
.text-bold {
font-size: 16px; // change the font-size to 14px
font-weight: bold;
}
Но что если правила прописаны внутри тега, без использования классов?
<div style="font-size: 16px; font-weight: bold">Some Text</div>
Даже если мы сумеем найти нужный HTML-тег, мы не будем знать, есть ли в этом HTML-файле другие правила, затрагивающие размер шрифта. Поскольку здесь не использовались селекторы, нам придется просмотреть одну з другой все HTML-странцы, чтобы найти возможные правила относительно размера шрифта и изменить их тоже.
Не проще ли использовать селектор CSS? А есть ведь вещи и похуже…
Специфичность (проблемы с перезаписыванием)
Встроенные стили обладают самой высокой специфичностью (если не считать тегов !important).
Допустим, мы используем для элемента и класс, и встроенный стиль:
.text-bold {
font-size: 16px;
font-weight: bold;
}
<div class="text-bold" style="font-size: 14px">Some Text</div>
Таким образом, font-size текста будет 14px, потому что встроенные стили имеют более высокую специфичность, чем CSS-классы. Вы вносите изменение в класс:
.text-bold {
font-size: 20px;
font-weight: bold;
}
А размер шрифта все равно остается равным 14px. Изменение CSS-класса ни к чему не приводит, и вы восклицаете: «Эй, а почему это мой CSS-код не работает? Ненавижу CSS!». Это приводит вас к использованию !important, который творит чудеса:
.text-bold {
font-size: 20px !important;
font-weight: bold;
}
А это табу, и о нем мы поговорим в следующем разделе.
4. Избегайте !important
Окей, ваш CSS не сработал, хотя должен был, и вы заставили его работать, применив !important.
Что происходит дальше? !important имеет самую высокую специфичность среди всех CSS-селекторов.
В общем, вы таким образом говорите браузеру применять это конкретное правило с !important всегда и при любых обстоятельствах. А это не хорошо, потому что правила CSS могут отличаться в разных селекторах.
Единственный способ перезаписать правило !important это использовать другое правило !important. Это приводит ко все более частому использованию этих тегов. Поверьте мне, в недалеком будущем код вашего проекта будет полон !important, из-за чего ваш CSS-код станет труднее поддерживать. Поэтому старайтесь не использовать это правило вовсе.
5. Используйте препроцессор
В более крупных проектах очень полезно применять препроцессор CSS, например, Sass или LESS. Препроцессор открывает дополнительные возможности перед нашим CSS-кодом, которых обычно у него нет.
Например, мы можем определять переменные, функции и миксины, можем испортировать и экспортировать наши CSS-файлы в другие CSS-файлы, а также писать вложенный CSS-код:
Препроцессор имеет собственный синтаксис, который позже переводится в стандартный CSS (в отдельном CSS-файле), поскольку браузеры его не понимают.
Мне нравится работать с Sass, я его применял во многих проектах. О преимуществах использования препроцессоров я писал отдельно.
6. Используйте сокращенные варианты записи
Некоторые 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;
}
О том, как использовать сокращенную запись свойств и для каких свойств это применимо, можно почитать здесь.
7. При необходимости добавляйте комментарии
Обычно качественный код не нуждается в комментариях, поскольку он чист и говорит сам за себя. Но все равно, в некоторых случаях могут потребоваться дополнительные пояснения.
// Ваши комментарии
.example-class {
// your rules
}
Так что, если чувствуете, что какие-то части вашего кода непонятны, не бойтесь добавить комментарий. С другой стороны, следите за тем, чтобы не перестараться в этом деле!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]