Даже если вы сейчас создаете свои приложения с использованием популярного фреймворка, такого как React, Angular или Vue.js, вам все равно нужно добавить к ним некоторые стили. В зависимости от технологии, которую вы используете, вам нужно писать свои стили определенным образом. Например, для React из-за его компонентности стили лучше писать с помощью модулей CSS. Если вы хотите использовать новые функции CSS, было бы разумно использовать CSSNext. Не забывайте о старых хороших препроцессорах CSS, таких как Sass или LESS. Вы можете подумать - так много инструментов, держу пари, что стили написания для каждого из них разные. Да, вы правы. Но основы те же.

В этой статье я хочу представить несколько хороших советов по написанию надежного и поддерживаемого CSS, независимо от того, любите ли вы использовать модули CSS или Sass / LESS. Эти советы представлены в синтаксисе SCSS, поэтому, если вам нужно некоторое введение в Sass, вот хорошее место для начала. Если вы используете простой CSS, расширенный с помощью CSS Next, эта статья также для вас. Эти базовые концепции можно легко использовать в других инструментах или препроцессорах CSS.

Структурируйте свои стили

Хорошо продуманная структура папок помогает поддерживать ваш проект. То же самое и с вашими стилями. Важно разделить код по элементам, к которым они относятся. Хранение всех ваших правил в одном огромном файле styles.scss наверняка вызовет проблемы. Особенно, если вы хотите масштабировать свой проект и добавлять новые компоненты.

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

Ниже приведен пример структуры папок:

И main.scss:

Назовите цвета

Итак, у вас есть дизайн веб-сайта, и вы хотите начать с верстки кода. Что было бы разумным подходом к управлению цветами в вашем проекте? Просто вы можете записать значения цвета прямо в правилах стиля. Но в будущем такой подход может быть проблематичным. К счастью, и CSS, и Sass предоставляют нам переменные.

В Sass вы можете сохранить любое значение как переменную, поэтому разумно сохранить значение цвета как переменную. В основном мы используем HEX (шестнадцатеричные числа) для определения значения цвета. Для человека HEX выглядит как шифрование, потому что это формат, разработанный для компьютеров. Трудно сказать, какой цвет записывается как # 7fffd4 или # ffd700 (если вы их понимаете, возможно, вы не пройдете тест CAPTCHA). . Первый - аквамарин, а второй - золотой. Не будет ли проще назвать эти цвета таким образом?

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

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

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

Вот пример настройки цвета:

Сглаживание вложенных объявлений

Использование препроцессора CSS не только добавляет некоторые полезные функции к вашему набору инструментов, но также помогает с организацией кода. Лучшим примером является вложение объявлений стилей. В Sass можно вкладывать селектор в другие селекторы, чтобы вы могли видеть, как они связаны. Это действительно мощная функция, поэтому ею легко злоупотреблять.

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

См. Пример ниже:

Не злоупотребляйте ссылкой родителей

В Sass можно получить ссылку на родителя селектора. В сочетании с вложением вы можете определить правила, которым нужен родительский селектор. Например:

Иногда использование & может ввести в заблуждение. Вот пример неправильного использования этого селектора:

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

Напишите свойства в осмысленном порядке

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

  • Поле (положение, отображение, ширина, поле и т. Д.)
  • Текст
  • Фон
  • Граница
  • Другое (по алфавиту)

Используйте соглашение об именах классов

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

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

Вот пример:

Надеюсь, написать поддерживаемые стили не так сложно, если мы сможем использовать одно из популярных соглашений об именах классов - BEM, OOCSS или SMACSS. Я предпочитаю БЭМ - очень популярную методику, созданную разработчиками Яндекса. Его название является аббревиатурой от слов block, modifier и element . Если вы не знакомы с БЭМ, я Предлагаю вам ознакомиться с его документацией.

Вот наш пример после bemification:

Напишите описательные медиа-запросы

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

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

Чтобы сделать медиа-запросы более удобными для разработчиков, мы можем назначить их правила переменной. В Sass можно использовать строку как обычный код CSS, используя скобки интерполяции #{}.

Тот же трюк мы можем использовать для других правил. Это может быть полезно для определения сложных @supports правил.

Добавить модульные стили

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

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

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

дальнейшее чтение

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

Понравилось? Нажмите кнопку 👏 ! Спасибо!

Вы можете найти меня в Twitter и Github.