Код

CSS: Что такое хорошо, а что такое плохо

Александр Рыбка 20:12:2017 308

Многие разработчики жалуются на CSS. Каскад, странные имена свойств, вертикальное выравнивание. В этом языке есть много странных вещей, особенно если вы хорошо знакомы с языком программирования, например JavaScript или Ruby.

Тем не менее, настоящая проблема с языком CSS заключается в том, что он и прост и сложен одновременно. Имею в виду то, что не требуется много времени, чтобы научиться писать на CSS, но для написания «действительно хорошего CSS» требуется необычайное усилие.

Для определения что это такое — «хороший CSS», я много думал о том, как мы можем определить, что такое плохой CSS. В других областях программирования разработчики склонны говорить о «запахе кода» (code smells), когда они комментируют  плохо написанный код.

Ниже мой собственный список «запахов кода»,  который поможет нам определить плохой CSS. Обратите внимание, что эти моменты связаны с моим опытом написания сайтов, поэтому не судите строго.

Запах # 1: Написание CSS с нуля

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

Перед тем как приступить, обязательно выполните один из следующих пунктов:

— Узнайте, как работает текущая система и какие у нее есть ограничения.

— Разберитесь в базовой инфраструктуре CSS.

Я думаю, что этот подход был прекрасно описан здесь:

Написание CSS с нуля

Запах № 2: Имена файлов и соглашения об именах

Предположим, вам нужно создать страницу поддержки на сайте. Первое, что вы вероятно сделаете, это создадите файл CSS под названием `support.scss` и начнете писать код следующим образом:

Имена файлов

Проблема здесь не обязательно в самих стилях, а в концепции «страницы поддержки» в первую очередь. Когда мы пишем CSS, нам нужно думать гораздо масштабней —  о шаблонах и компонентах, а не о конкретном содержании, которое пользователь должен видеть на странице. Таким образом, мы можем повторно использовать что-то вроде «карты» снова и снова на каждой странице, включая один вариант, который нам нужен для страницы поддержки:

Соглашения об именах файлов

Это уже немного лучше!

Запах # 3: стилизация HTML-элементов

По моему опыту, стилизация 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? Не забудьте добавить комментарий ниже!

Видео