Вступление
Многие разработчики жалуются на CSS. Каскад, странные имена свойств, вертикальное выравнивание. В этом языке есть много странных вещей, особенно если вы хорошо знакомы с языком программирования, например JavaScript или Ruby.
Тем не менее, настоящая проблема с языком CSS заключается в том, что он и прост и сложен одновременно. Имею в виду то, что не требуется много времени, чтобы научиться писать на CSS, но для написания «действительно хорошего CSS» требуется необычайное усилие.
Для определения что это такое — «хороший CSS», я много думал о том, как мы можем определить, что такое плохой CSS. В других областях программирования разработчики склонны говорить о «запахе кода» (code smells), когда они комментируют плохо написанный код.
Ниже мой собственный список «запахов кода», который поможет нам определить плохой CSS. Обратите внимание, что эти моменты связаны с моим опытом написания сайтов, поэтому не судите строго.
Запах # 1: Написание CSS с нуля
В больших проектах и компаниях обычно есть свои наработки инструментов и систем для создания кнопок, стилей и прочего. Ваше желание написать отдельный код с нуля может стать проблемой.
Перед тем как приступить, обязательно выполните один из следующих пунктов:
— Узнайте, как работает текущая система и какие у нее есть ограничения.
— Разберитесь в базовой инфраструктуре CSS.
Я думаю, что этот подход был прекрасно описан здесь:
Запах № 2: Имена файлов и соглашения об именах
Предположим, вам нужно создать страницу поддержки на сайте. Первое, что вы вероятно сделаете, это создадите файл CSS под названием `support.scss` и начнете писать код следующим образом:
Проблема здесь не обязательно в самих стилях, а в концепции «страницы поддержки» в первую очередь. Когда мы пишем CSS, нам нужно думать гораздо масштабней — о шаблонах и компонентах, а не о конкретном содержании, которое пользователь должен видеть на странице. Таким образом, мы можем повторно использовать что-то вроде «карты» снова и снова на каждой странице, включая один вариант, который нам нужен для страницы поддержки:
Это уже немного лучше!
Запах # 3: стилизация HTML-элементов
По моему опыту, стилизация HTML-элемента (например раздела или тега абзаца) почти всегда означает, что мы пишем хак. Существует только один подходящий случай для стилирования элемента HTML следующим образом:
В глобальном смысле это так называемые «стили сброса». В ином случае мы делаем нашу кодовую базу запутанной и сложной для отладки, потому что не имеем понятия, являются ли эти стили хаками для определенной цели или же они определяют значения по умолчанию для этого элемента HTML.
Код запаха № 4: Отступы
Отступающий код Sass, при котором дочерние компоненты находятся в родительском элементе, почти всегда является запахом кода и верным признаком того, что этот проект необходимо реорганизовать.
Рассмотрим пример:
Вы можете использовать только класс .header внутри .card? Или мы переопределяем еще один блок CSS, где-то еще внутри нашей базы кода?
Чтобы действительно понять, как это работает, мне нужно знать и другие части кода. Если возникает вопрос, почему этот код существует или как он работает, то он слишком сложный или неподходящий для использования в дальнейшем.
Это приводит к запаху пятого кода …
Запах № 5: переопределение CSS
В идеальном мире у нас есть сброс CSS-файла, который задает значение всем нашим элементы по умолчанию, а затем у нас есть отдельные файлы CSS для каждой кнопки, ввода формы и компонента в нашем проекте.
Возьмем за правило: Наш код должен быть переопределен каскадом лишь один раз.
Во-первых, это делает общий код более предсказуемым. Во-вторых, делает код компонента (например, button.scss) сверх читабельным.
Теперь мы знаем, что если нам нужно что-то исправить, мы можем открыть один файл и эти изменения будут происходить по всему сайту одним махом. Когда дело доходит до CSS, предсказуемость — это все.
В той же CSS-утопии было бы невозможно переопределить некоторые имена классов с помощью чего-то вроде CSS-модулей. Таким образом, мы избегаем ошибок.
Запах # 6: файлы CSS из 100 строк
Чем больше CSS вы напишете, тем запутанней и уязвимей становится кодовая база. Поэтому всякий раз, когда я получаю около 100 строк CSS, я склонен переосмысливать то, что я делаю, задавая себе пару вопросов. Начиная и заканчивая: «это один компонент, или мы можем разбить его на отдельные части, которые работают независимо друг от друга?»
Это сложный и трудоемкий процесс, который нужно практиковать бесконечно, но он приводит к созданию надежного кода. Этот процесс научит вас писать действительно хороший CSS.
Заключение
Полагаю, у меня теперь есть еще один вопрос, но на этот раз для вас: что вы видите как запах кода в CSS? Что такое плохой CSS? Что такое хороший CSS? Не забудьте добавить комментарий ниже!
