4 метода CSS, которые будут работать в любом препроцессоре CSS и фреймворке

2871

4 метода CSS, которые будут работать в любом препроцессоре CSS и фреймворке

Вступление

Развитие технологий — это обычно хорошо. Время не стоит на месте. В зависимости от используемого фреймворка Javascript (например: React, Vue или Ember) и независимо от того, используете ли вы компонентную архитектуру (где разметка, CSS и Javascript находятся в одном файле), ваш CSS может сильно отличаться от проекта к проекту.

Пожалуйста, продолжайте
     Пожалуйста, продолжайте

Я собрал следующие правила, которые будут полезными практически для каждого проекта. Эти правила могут применяться или в начале проекта, или в уже запущенном приложении. Просмотрите список и реализуйте то, что вам подойдет. Список ни в коем случае не является исчерпывающим. Предполагается, что вы используете какой-то препроцессор (SASS, LESS и т. д.) совместно с каким-либо фреймворком Javascript.

 

1. Объявляйте все переменные CSS в одном файле

Сохранение файла с одними переменными помогает предотвратить конфликт переменных с тем же именем. Он также позволяет вам манипулировать несколькими переменными, которые связаны друг с другом. Например, если вы поддерживаете строгую сетку типографии, у вас могут быть связанные свойства: font-size, line-height, margin и padding. Если вы сохраняете все переменные в одном файле, то вы можете:

$fontSize: 1rem;
$lineHeight: $fontSize*1.395;

Это очень простой пример. Но вы бы не смогли поддерживать сложную (реальную) версию, если бы также объявляли переменных в нескольких файлах (в файлах CSS / файлах компоненты)

2. Когда это возможно, используйте в названиях переменных camelCase с соответствующими свойствами CSS

Объявление ваших переменных в формате camelCase с именем их соответствующего свойства CSS сохраняет ваши переменные последовательными, легкодоступными и простыми в управлении. Например, если вы используете стандартную переменную размера шрифта в своем CSS, подумайте об именовании переменной в стиле $ fontSize. Это позволяет делать несколько модификаций одного свойства с соблюдением чистоты в стилях.

$fontSize: 1rem;
$fontSize-heading: 3rem;
 
VS
 
$font-size-normal: 1rem;
$font-size-heading: 3rem;
 
ИЛИ ХУЖЕ
 
$small-font_size: 1rem;

Но убедитесь, что вы указали цветовые переменные, начиная с $ color- * (это очень важно). Вы можете подумать, что я повторяюсь, и вы будете правы. Это так важно, что я упомяну об этом снова. Без этого правила может произойти следующее:

$border-color: #fafafa;
$text-color: #000000;

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

Если же я объвил все свои переменные с помощью $ color- *, то как только я наберу цвет свойства, я уже буду знать, что мне нужно сделать дальше.

Если даже у меня нет такого автодополнения в моей среде разработки, то у меня все еще будет $ color- * в голове. Его легче запомнить и упорядочить по алфавиту в переменном файле.

Бонусный пункт

Назовите свои цветовые переменные, как вы описываете цвет, затем для удобства добавьте на него дополнительные ссылки.

$color-demure: #fafafa; // описание цвета
$color-border: $color-demure;
$color-underline: $color-demure;
 
$color-dark: #1a1a1a;
$color-text: $color-dark;
$color-heading: lighten($color-dark, 5%);

3. Используйте Mixins (или ваши не-SASS эквиваленты)

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

У вас есть возможность использовать инклюды в миксинах, но будьте осторожны с ними, так как это может навредить вашей работе и изменить исходную структуру. Вы можете создать небольшую обёртку для миксина и, вкладывая на входе стили, использовать её совершенно для всего, начиная с текстовых стилей и заканчивая компонентами. Использование mixins идеально подходит для жёстких элементов, таких как: textarea, input и button.

Вот пример: маленький кнопочный mixin со множеством вкусняшек 😃
Вот пример: маленький кнопочный mixin со множеством вкусняшек 😃

4. Используйте методологию BEM

Использование BEM (или аналогичной методологии) способствует согласованности вашего кода и сохраняет его поддерживаемость разработчиками в дальнейшем. Пример:

$block__element--modifier: 1px;
 
ИЛИ
 
$block-element--modifier: 1px;

Я знаю, это текущее название содержит в себе много слов, и вам это, скорее всего, не нравится. Но:

  • Лучше / быстрее писать классы, относящиеся к вашему селектору.
  • Семантическое наименование классов упрощает работу.
  • Вы можете использовать классы-модификаторы для описания состояний элементов.

Очень сложно зацепить селекторов, когда вы пишете компоненты. Поскольку вы находитесь внутри компонента, вы можете «безопасно» вложить гнездо, потому что 1. Ваша инфраструктура просто собирается анонимизировать ваши селекторы и 2. В компоненте недостаточно селекторов

Что бы вы предпочли увидеть, когда просматриваете чей-то код?

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

Заключение

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

источник