Современный CSS для динозавров Перевод

Отличная статья Питера Джанга от 4 февраля 2018 года. Кто интересуется CSS, возможно стоит прочитать её целиком. На этом сайте опубликую только вступления (и название глав).

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

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

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

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

А дальше главы, которые лучше читать в оригинале:

• Использование CSS для базовой стилизации
• Использование CSS для верстки
• Макет с CSS float
• Макет на основе Flexbox
• Макет на основе сетки
• Использование препроцессора CSS для нового синтаксиса
• Использование постпроцессора CSS для преобразования функций
• Использование методологий CSS для удобства сопровождения

OOCSS (объектно-ориентированный CSS) был впервые представлен в 2009 году как методология, основанная на двух основных принципах.

SMACSS (Масштабируемость и модульная архитектура для CSS) был введен в 2011 году как методология основана на написании CSS в 5 различных категорий — базовые правила, правила размещения, модули, государственные правила и правила темы.

BEM (Блок, Элемент, Модификатор) был представлен в 2010 году как методология, организованная вокруг идеи разделения пользовательского интерфейса на независимые блоки.

Atomic CSS (также известный как функциональный CSS) был представлен в 2014 году как методология, организованная вокруг идеи создания небольших одноцелевых классов с именами, основанными на визуальных функциях.

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

Итак, это вкратце современный CSS.

Мне интересен Atomic CSS, и статья Адама Уотана: CSS Utility Classes and «Separation of Concerns», где замечательно показано, как традиционное разделение задач приводит к созданию CSS, зависящего от HTML (даже при использовании таких методологий, как BEM).

Эти 2 статьи, просто отлично написаны и достаточно подробно описывают, какие могут быть проблемы у разных подходов и что вообще происходит (зачем эти разные подходы).

• Modern CSS Explained For Dinosaurs
• CSS Utility Classes and «Separation of Concerns»