Не пишите CSS

Как сверстать?

Всем привет!

Сначала был HTML

HTML 3.2 (1997)

<img align="right" src="alice.jpg" />
<font face="Arial" size="4" color="firebrick">
    Похоже на экспорт Word'а
</font>

CSS 1.0 (1996)

Семантическая верстка

\section{Семантическая вёрстка}
\begin{definition}
    \emph{Семантической} вёрсткой называется разметка
    смысла текста, а не его \textit{оформления}.

    Таким образом оформление отделяется, и может быть
    изменено независимо от содержимого.
\begin{definition}

Проблемы CSS

Что хорошо для книги не всегда хорошо для сайта

Книги не расширяются и не изменяются после публикации

Сайты превращаются в порталы, расширяют функциональность, эволюционируют и меняют дизайн

Проблемы CSS

Сложность селекторов

Специфичность и вес селекторов

input[type~="checkbox"].checkbox + label:before {/*...*/}

[class^="icon-"], [class*=" icon-"] {/*...*/}

Проблема чистого листа

Object-Oriented CSS

• объект — повторяющийся компонент;
• объект становится namespace’ом для селекторов;
• отделение формы от оформления;
• объект не должен влиять на оформление содержимого;

Блок__Элемент_Модификатор

• блок — минимальная единица построения интерфейса;
• блоки можно вкладывать друг в друга;
• элементы существуют только внутри блока;
• элементы можно вкладывать друг в друга, но не отражать эту структуру в именах;
• стилизация с помощью модификаторов;

Какие проблемы решены

• Неоднозначность решения;
• Глобальное пространство имён уникальные имена;
• Сложность селекторов и определение веса один класс;
• Отсутствие наследования модификаторы;
• Влияние оформления контейнера на оформление содержимого;
• Проблема чистого листа;

Страница новостей

Страница событий

Страница авторов

Страница партнёров

Новые требования

• Авторов разместить по 5 в строке, потому как у них карточки поменьше.
• У новостей сделать синюю полоску сверху.

Добавим модификаторов

<div class="card-item card-item_wide card-item_shadowed
card-item_rulled card-item_with-footer card-item_hot
card-item_starred”>

Проблемы контейнеров

• имена контейнеров должны быть уникальными;
• семантические контейнеры увеличивают дублирование кода;
• проблема чистого листа лишь усугубляется;

Какие проблемы решаются

• Неоднозначность решения;
• Глобальное пространство имён;
• Сложность селекторов и определение веса;
• Отсутствие наследования mixin;
• Влияние оформления контейнера на оформление содержимого;
• Проблема чистого листа const;

Проблемы препроцессоров

• где заканчивается примесь и начинается класс наследника?
• имя примеси редко говорит обо всём, что она делает
• примесей может стать слишком много
• изменение примеси может привести к неожиданным эффектам
• переменные не решают проблемы чистого листа

Утилитарные классы

<div class="p-2 my-1 d-f w-25">
    <p class="bg-success">
        ...
    </p>
</div>

Преимущества

• однозначность решений;
• глобальное пространство имён больше не является проблемой;
• селекторы как и в БЭМ это только класс;
• нет проблемы чистого листа;
• не нужно писать CSS;
• объём CSS не увеличивается;
• классов мало и их поведение очевидно;

КомпонентыUtility-first

Что дальше?

• SMACSS;
• стили без классов (normalize.css);
• сетка (grids / flexbox);
• тема (custom-properties / препроцессоры с их переменными);
• документация (KSS);

Почитать

• https://frontstuff.io/in-defense-of-utility-first-css
• https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
• https://css-irl.info/a-year-of-utility-classes/

Вопросы?