Написание хорошего CSS

Опубликовано: 2016-10-17

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

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

Проблемы

Есть несколько вещей, которые беспокоят меня в CSS. Самые частые неприятности, которые у меня есть:

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

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

Долгое время я полагал, что имена моих классов «семантические», и что это просто я делаю что-то, так что нет необходимости объяснять код или маленькие «хаки» или что-то в этом роде.

Возвращение к коду давнего проекта быстро доказывает ошибочность этой теории.

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

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

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

Решения

Хотя нет ничего идеального, я считаю, что есть вещи, которые мы можем сделать, чтобы улучшить наш код. Некоторое время назад я обнаружил руководство по CSS от Гарри Робертса. Itt верен обещанию «Высокоуровневые советы и рекомендации по написанию разумного, управляемого, масштабируемого CSS».

Комментарии

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

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

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

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

Объектно-ориентированное программирование (ООП) — это парадигма программирования, которая представляет концепцию «объектов» […], которые обычно являются экземплярами классов [и] используются для взаимодействия друг с другом при разработке приложений и компьютерных программ.

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

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

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

 /**
 * Простой, не требующий дизайна объект-кнопка. Расширьте этот объект с помощью скина `.btn--*`
 * сорт.
 */
.btn {
    отображение: встроенный блок;
    прокладка: 1em 2em;
    вертикальное выравнивание: посередине;
}

/**
 * Скин положительных кнопок. Расширяет `.btn`.
 */
.btn -- положительный {
    цвет фона: зеленый;
    белый цвет;
}

/**
 * Скин негативных кнопок. Расширяет `.btn`.
 */
.btn -- отрицательный {
    цвет фона: красный;
    белый цвет;
}

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

 <button class="btn btn--positive">ОК</button>

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

БЭМ

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

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

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

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

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

 .собака {}
.собака__хвост {}
.dog--маленький {}

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

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

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

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

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

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

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

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

Заключение

Моя истинная точка зрения заключается в том, что CSS может быть лучше. Все может быть лучше. Кто-то недавно сказал мне в комментарии к сообщению на Reddit, что «в CSS нет семантики». Я полностью не согласен. CSS 100%, без сомнения может быть смысловым.

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

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

TL;DR

Хорошо, может быть, это было много — подведем итог, напишите лучший CSS, сделав это:

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

  • каждый класс делает что-то одно — он делает это хорошо, он делает это правильно

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

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

Препроцессоры великолепны :

  • проверить их: МЕНЬШЕ – SASS
  • или найдите другие: 8 препроцессоров CSS для ускорения времени разработки