Пишем хороший CSS

0

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

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

Проблемы

Есть несколько вещей, которые беспокоят меня в CSS. Вот мои наиболее распространенные раздражители:

  • повторение общего кода
  • браузерные префиксы
  • отсутствие комментариев
  • сверхсложные селекторы
  • плохие названия классов

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

В течение долгого времени я полагал, что мои названия классов “семантические”, и занимаюсь этим я, так что нет никакой необходимости объяснять код, или маленькие “хаки”, или что-либо другое.

Возвращение к коду давнего проекта быстро опровергло эту теорию.

Когда дело доходит до кода на работе, я не могу взять всю вину на себя. На самом деле, этим занималось определенное количество людей.

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

Кроме того, как это часто бывает с давними проектами, что-то из кода устарело. Многое из этого это CSS3, или то, что было модным и интересным 5 лет назад. В обоих случаях, в то время существовали различные способы написания кода, а в некоторых случаях, естественное отсутствие знаний.

Я также узнал, что некоторые программисты утверждают, что их код “самодокументирующийся”. Если вы не знакомы с этим термином, он переводится как “у моего кода нет комментариев”.

Решения

Нет ничего совершенного, поэтому я считаю, что мы можем улучшить наш код, исправив некоторые вещи. Недавно я открыл для себя CSS Guidelines, написанное Harry Roberts. Оно действительно рассказывает о “советах и руководящих принципах высокого уровня для написания здравого, управляемого, масштабируемого CSS”.

Комментарии

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

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

Объектная ориентация

Объектная ориентация – это парадигма программирования, которая разбивает большие вещи на маленькие.

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

Когда дело касается CSS, мы называем это объектно-ориентированный CSS, или OOCSS. Основная концепция разбивает структуру элемента с его оболочки. Это означает, что мы можем легко повторно использовать любые повторяющиеся паттерны проектирования, без необходимости повторного использования определенных деталей реализации в то же время. OOCSS фокусируется на повторном использовании кода, что ускоряет процесс, и может сохранить размер нашего кода.

Я рассматриваю структурные аспекты, как скелеты; общие рамки, которые дают конструкциям объекты. Эти объекты являются простыми шаблоны проектирования, которые ничем не приукрашены. Мы извлекаем структуру из множества компонентов, чтобы получить общий объект.

Затем мы по желанию добавляем слой “оболочки” к нашей структуре таким образом, что мы можем придать абстракциям конкретный внешний вид. Например (взято из CSS Guidelines):

Здесь мы видим, как класс .btn просто предоставляет структуру для элемента, но не приукрашивает. Мы можем расширить .btn со вторым классом, как .btn—positve, чтобы придать этому элементу более конкретный стиль:

Я предпочитаю использовать несколько классов в моем HTML, по сравнению с использованием чего-то вроде @extend в препроцессоре. Это дает мне больше видимости в моем HTML, позволяя мне быстро увидеть, какие классы применяются к моему элементу. Это также означает, что мои классы не тесно связаны с другими стилями в моем CSS. Это своего рода помогает OOCSS следовать концепциям инкапсуляции.

БЭМ

БЭМ (Блок, Элемент, Модификатор) является фронтенд методологией, разработанной в Яндексе. БЭМ на самом деле очень полная методология, и я, честно говоря, не копался во всех деталях, но то, что меня интересует это просто naming convention.

Я использую БЭМ-подобные naming conventions. Концепция та же, но точный синтаксис может незначительно отличаться.

БЭМ распределяет классы на три группы:

  1. Блок: корень или основа компонента
  2. Элемент: компонент внутри блока
  3. Модификатор: изменение или расширение Блока

Очень простая аналогия (не пример):

Элементы разделяются двумя символами подчеркивания (__), а модификаторы разделяются двумя дефисами (–).

В приведенной выше аналогии, мы видим, что это .dog это Блок, корень элемента. Затем, .dog__tail это Элемент, это меньшая часть .dog Блока. Наконец, dog–small это Модификатор, конкретное изменение .dog Блока. Вы также можете применить Модификаторы к Элементам. Например, мы могли бы иметь .dog__tail—short, изменить dog__tail Элемент.

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

Препроцессоры

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

Например, одна вещь, которая была бы очень приятной в CSS – переменные. Может быть, вы хотите, чтобы левое поле одного элемента было равно ширине другого, и вдруг кто-то решит, что эти цифры должны измениться. Так как они являются одной и тем же цифрой, и ваш макет может рассчитывать на нее, вы должны изменить его больше, чем в одном месте. Но с переменной вы можете изменить его в одном месте, и это отразится в макете. Конечно, в препроцессорах есть намного больше интересного, чем просто переменные, но это только начало!

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

Доступны несколько препроцессоров, но я использовал только два – LESS и SASS. Пожалуйста, обратите на них внимание, включите один из них в свой рабочий процесс, и вы не будете оглядываться назад.

Итог

CSS может быть лучше. Все может быть лучше. Кто-то недавно сказал мне, что “У СSS нет семантики”. Я искренне не согласен. CSS на 100%, без сомнения, может быть семантическим.

Использование OOCSS и БЭМ, на самом деле, придает CSS семантическое значение. Это не означает, что это легко, но это стоит изучить. Объедините это с CSS препроцессорами, и у вас есть шанс получить очень читаемый, поддерживаемый и масштабируемый CSS.

Я также хотел бы отметить, что это не только делает ваш CSS (препроцессированный или нет) более читаемым, но также делает ваш HTML более читабельным, применяя семантический класс к элементам.

В итоге, вы можете написать хороший CSS, используя:

Объектно-ориентированный CSS:

  • каждый класс делает одну вещь – он делает это хорошо, он делает это правильно

Блок, Элемент, Модификатор (БЭМ) названия классов:

  • Блок: .grid
  • Элемент: .grid__item (2 подчеркивания)
  • Модификатор: .grid–wide (2 дефиса)

Препроцессоры удивительны:

просмотрите: LESS – SASS

или другие: 8 CSS препроцессоров, которые ускорят время разработки

Перевод статьи

Поделиться: