7 важных советов для написания качественного CSS

Автор статьи Cem Eygi

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

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

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

1. DRY

DRY (Don't Repeat Yourself) означает «Не повторяйся». Это общий принцип разработки программного обеспечения, который может применяться на любом языке программирования, а также в CSS. Как можно понять из названия, DRY направлен на то, чтобы максимально избегать или уменьшить повторение.

Например, мы можем создать 3 класса для 3 кнопок следующим образом:

Или мы можем использовать принцип DRY, написав общие правила один раз в главном классе и дополнительные правила в других классах:

Как мы видим, применение принципа DRY позволяет избежать повторения, уменьшить количество строк и улучшить читаемость и даже производительность.

2. Названия селекторов

Именование селекторов - еще один важный момент для написания лучшего CSS. Имя селектора должно быть понятным и читабельным.

Обычно <p> - это HTML-тег, обозначающий абзац. Выше мы не можем понять, что такое класс p. Также вам следует избегать таких имен, как myFirstForm, и я не советую использовать CamelCase.

Называть вещи в программировании не так просто, но есть различные соглашения об именах, которые вы можете использовать в своем проекте.
БЭМ (Блок Элемент Модификатор) - один из них. Я уже работал с БЭМ и могу рекомендовать его.

Примечание переводчика: команда канала активно использует БЭМ и всем его советует

3. Не используйте Inline-стили

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

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

Разделение проблем

Согласно принципу разделения проблем, стили (CSS), контент (HTML) и логика (JavaScript) должны быть разделены для улучшения читаемости и обслуживания.

Включение правил CSS в теги HTML нарушает это правило:

Нам лучше сохранить наши стили во внешних файлах CSS.

Трудности при поиске

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

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

Затем нам нужно найти селектор (класс text_bold). Потом мы переходим к этому классу и вносим изменения:

Но если правила написаны inline-стилями вместо использования классов:

Даже если мы найдем HTML-тег, мы не сможем узнать, есть ли внутри HTML другие правила font-size или нет.
Поскольку селектор не используется, мы должны просмотреть все HTML-страницы одну за другой, попытаться найти другие правила font-size и также изменить их.

Разве не было бы проще с селектором CSS? Но есть кое-что еще хуже.

Специфика / проблемы с перезаписью

Встроенные стили имеют самый высокий вес среди селекторов CSS (не считая !important).

Учитывая, что мы используем класс и встроенный стиль для элемента:

Здесь размер шрифта текста будет 14 пикселей, потому что встроенные стили имеют более высокий вес, чем классы CSS.

Когда вы вносите изменения в класс:

Размер шрифта по-прежнему будет 14 пикселей. Таким образом, ваше изменение в классе CSS не сработает. Это может привести к отчаянным мерам (использование !important).

Избегайте использования тега !important

Итак, ваш CSS работает не так, как предполагалось, и вы заставили его работать, применив !impotant.

Что произойдет дальше? Тег !important имеет самую высокий вес среди всех селекторов CSS.

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

Единственный способ переопределить !important - другой !important.
Поверьте, в ближайшем будущем в коде вашего проекта будет много тегов !important, что значительно усложнит поддержку кода CSS. Так что постарайтесь не использовать его.

5. Используйте препроцессор

Работа с препроцессором CSS, таким как SASS или LESS, очень полезна в больших проектах. Препроцессор привносит в наш код CSS дополнительные функции, которые мы обычно не можем сделать.

Например, мы можем определять переменные, функции и миксины, мы можем импортировать и экспортировать наши файлы CSS в другие файлы CSS, и мы можем писать вложенный код CSS:

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

Примечание переводчика: команда канала всегда использует SCSS на больших проектах.

6. Используйте сокращения

Некоторые свойства CSS, такие как padding, margin, font, border, background, можно гораздо проще записать с помощью сокращений. Использование сокращений помогает сократить количество строк.

Без сокращений класс выглядел бы так:

А с сокращениями это выглядит так:

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

7. Добавляйте комментарии, когда это необходимо

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

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

Источник: https://www.freecodecamp.org/news/7-important-tips-for-writing-better-css/