Атомний OOBEMITSCSS

1

Від автора: люди люблять давати назви різних речей, а розробники обожнюють скорочення. І ось ми тут, і перед нами всі ці правила іменування і методики CSS: BEM, SMACSS, PointNorth, ITCSS, OOCSS, Title CSS, Idiomatic CSS, AtomicDesign, SUIT CSS, Kickoff CSS,і т. д.

Нас часто запитують «Ти користуєшся OOCSS або BEM ?», але ці підходи не виключають один одного. Насправді в більшості випадків ми беремо концепції та ідеї вищезазначених методик і перемішуємо їх, підлаштовуючи їх під наші конкретні потреби.

Отже, чим же я користуюся на даний момент? І це атомний OOBEMITSCSS. Ага. Атомний OOBEMITSCSS. Вперше я почула цей безглуздий термін з твіту DanEden.

Я впевнена, він навіть і не пам’ятає про цьому жарті. Але чим більше я про це думала, тим більше розуміла, що це був не жарт. І з тих пір це не виходила у мене з голови. OOBEMITSCSS — точно те, що ми стали застосовувати. Звучить дико, але в цьому є сенс, якщо розібратися.

Атомний CSS

Почнемо, мабуть, з AtomicDesign. AtomicDesign являє собою метод системного мислення, придуманий Brad Frost. Під час дослідження даного методу і пошуків того, як він відноситься до стилів, я натрапила на цю статтю по темі AtomicSass. Я не використовую описану в тій статті структуру каталогів, але активно застосовую поняття та ідеї, виражені Бредом в AtomicDesign, в проектуванні, а також переношу ці ідеї в розробку (за допомогою Sass модулів і компонентів).

Сенс даного підходу, в основному, в дизайні і розробки з точки зору системного мислення – створити окремі «молекули» або елементи, при з’єднанні яких утворюється «павутина» модулів, компонентів і в кінцевому підсумку цілих систем верстки сайту (Офіційно, існує 5 компонентів: атоми, молекули, організми, шаблони і сторінки). Побачити про що йде мова можна в прикладі нижче. Ось приклад з моєї стіни в Pinterest:

Атомний OOBEMITSCSS

На зображенні ми бачимо картку, яка складається з декількох атомів:

Підпис до фото

Текст заголовка (тип піна)

Основний текст (заголовок)

Виносний текст (повідомлення)

Виносний текст (Заголовок)

Виносне зображення (міні стіна)

Іконки джерела

Стандартні іконки

Статистика в числах

Основне зображення

Роздільники

Всі разом вони створюють молекули:

Зображення і цитата (основне зображення + іконка джерела + підпис до фото)

Метадані піна (текст типу піна + hr + основний текст + [стандартні іконки + числова статистика] х2)

Виноска (виносний зображення + виносний текст (повідомлення) + виносний текст (заголовок))

Ці молекули з’єднуються в організм або нашу картку: (Зображення і цитата) + (Метадані піна) + роздільники + (Виноска)

Домашня сторінка Pinterest сповнена таких організмів. Вони є складовою частиною верстки домашньої сторінки сайту:

Атомний OOBEMITSCSS

Ці елементи повторно використовуються і перемішуються в інших місцях на сайті:

Атомний OOBEMITSCSS

На малюнку вище зображено модальне вікно перегляду піна (яке відображається при натисканні на кнопку «Pinit»). Ми бачимо ту саму числову статистику за даним піну так само, як і на домашній сторінці, тільки без додаткової виноски знизу. Все це розміщене вже в іншому контексті.

Атомний OOBEMITSCSS

Дане вікно відображається по кліку на саме зображення. Зверніть увагу на те, як одна і та ж інформація про «тип» піна і іконка джерела випливають з обох шаблонам на цьому сайті. Мислення за методикою AtomicDesign дозволяє нам створювати модульні, уніфіковані системи дизайну.

BEM

Я використовую BEM для розмітки. BEM розшифровується як Блок, Елемент, Модифікатор. Він особливо корисний у великій команді. В такій, де я зараз працюю – IBM. Я написала статтю про цю методикою, але трохи пізніше була опублікована стаття краще мого (Не можу повірити, це було у 2013 році!). Давайте ще раз поглянемо на наш приклад з карткою:

Атомний OOBEMITSCSS

Як нам розмітити цю картку? Спочатку ми розділимо розмітку на її атомні складові. Це означає, що ми почнемо з самих базових елементів і будемо розширювати розмітку. Ізолюємо невелику ділянку і вивчимо його розмітку. (зверніть увагу: Я навмисно не звертаю уваги на посилання і взаємодію з ними в цьому прикладі, але по ідеї повинна.Атомна розмітка дозволяє повторно використовувати шматки коду, де б ми не створили компонент. Тобто по кліку на сердечко його стилі завжди будуть змінюватися, такі як колір заливки і збільшення лічильника лайків)

Атомний OOBEMITSCSS



Атомний OOBEMITSCSS

У класів семантичні імена, які описують контент, а також вони розбиті на молекули. Ці молекули в BEM будуть представляти із себе блоки. У наведеному вище прикладі у нас немає модифікаторів, але якщо ми захочемо відокремити метадані лайків (тобто зробити кликабельним тільки сердечко), наприклад (зазвичай я використовую псевдокласи для іконок), ми можемо зробити це так:

Деякі сперечаються, що такий підхід збільшує довжину в CSS селекторів (збільшує), але семантично це надає величезний сенс і реально очищає розмітку, обмежуючи кількість використовуваних класів. І, продовжуючи тему обмеження класів, хочу сказати, використовуйте по можливості **один клас на елемент**. Чесно кажучи, я вважаю BEM безцінним інструментом при роботі в команді, а також він відмінно підходить при роботі в об’єктно-орієнтованої манері.

OOCSS

OOCSS перекладається як Об’єктно-орієнтований CSS. Від Nicole Sullivan з GitHub:

«В принципі «об’єкт CSS» це повторення візуального шаблону, який може бути абстрагирован в шматочок коду HTML, CSS і можливо JavaScript. Цей об’єкт потім можна повторно використовувати в будь-якому місці на сайті».

У прикладах Ніколь з ГитХаба використовується безліч класів для досягнення цього формату, але на цьому етапі ви можете подумати: «Стійте, хіба це не суперечить BEM?». Немає. І не може. Щоб все зробити за каноном ми використовуємо Sass. Так що це вже меншою мірою OOCSS і більшою OOSCSS!

Мені подобається думати про те, як я пишу Sass код об’єктно-орієнтовано. Якщо уявити, що наша картка це об’єкт, який притягує до себе різні класи, то ми все ще можемо зберегти стару вкладеність тегів красиво і акуратно за допомогою всемогутнього амперсанда (якщо ви читали хоч одну з моїх попередніх статей, то ви знаєте, як сильно я люблю амперсанд).

А тепер приклад! Візьмемо нашу секцію метаданих, це хороший приклад складнощів роботи з прихованими даними:


Ми ж хочемо мислити модульно і об’єктно-орієнтовано. Іконки відмінний приклад:

%icon{
content: «;
display: block;
&—pins {
@extend%icon;
background-image: url(‘../img/pins.svg’);
}
&—heart {
@extend%icon;
background-image: url(‘../img/heart.svg’);
}
}

Що тут відбувається? А) Як я сказала вище, я зловживаю амперсандами, переконайтеся, що ви знайомі з ними. В) Ми створюємо невидимий селектор (або селектор плэйсхолдер) в Sass. Це означає, що цей код не буде оброблений CSS, поки ми не @extend його. Всі наші іконки мають кілька спільних властивостей (у цьому прикладі-content:» display:block). Потім для кожної іконки ми встановлюємо background-image під час *розширення* стилизуемой форми від батьківського блоку. Це можна зробити з допомогою циклу @each, і для більшої чистоти іконки будуть представлені у вигляді карти. На цьому етапі нічого не виводиться на екран, але технічно це те, що відбувається за кадром.

%icon,
%icon—pins,
%icon—heart {
content: ‘;
display: block;
}
%icon—pins {
background-image: url(‘../img/pins.svg’);
}
%icon—heart {
background-image: url(‘../img/heart.svg’);
}

Продовжуємо, давайте поглянемо на те, як виглядають блоки, якщо застосувати об’єктно-орієнтований Sass.

%font-stack—body {
// Pinterestсемейство шрифтів(!)
font-family: ‘Helvetica Neue’,’Helvetica’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,’Meiryo’,’MSPゴシック’,arial,sans-serif;
}
%font-stack—headers {
@extend%font-stack—body;
font-weight: 600; //заголовки мають той же шрифтом, що і весь інший текст, //тільки вага більше
}
%type—base-body {
@extend%font-stack—body; //розширюємо бодистэк
}
%type—base-h2 {
@extend%font-stack—headers; //розширюємо заголовки (які розширюють боді//стек і дають шрифтів більшу вагу)
font-size: 1.5 em; //font-size adjustment
}

А тепер до молекул! І тут стає справді цікаво:

.metadata {
&__pin-type {
@extend%type—base-h2; //розширюємо базові стилі заголовків
}
&__caption {
@extend%type—base-body; //расширяемосновной текст
}
&__hearts {
&:hover {
color: red; //унікальний колір при наведенні
}
&:after {
@extend%icon—heart; // створюємо іконку лайка з допомогою псевдокласу
}
}
&__pins {
&:hover {
color: green; //унікальний колір при наведенні
}
&:after {
@extend%icon—pins; // створюємо іконку лайка з допомогою псевдокласу
}
}
}

На що схожий цей CSS? Незважаючи на всю структуру, на виході у нас всього один клас!

.metadata__pins:after,
.metadata__hearts:after {
content: ‘;
display: block;
}
.metadata__pins:after {
background-image: url(‘../img/pins.svg’);
}
.metadata__hearts:after {
background-image: url(‘../img/heart.svg’);
}
.metadata__pin-type,
.metadata__caption {
font-family: ‘Helvetica Neue’,’Helvetica’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,’Meiryo’,’MSPゴシック’,arial,sans-serif;
}
.metadata__pin-type {
font-weight: 600;
}
.metadata__pin-type {
font-size: 1.5 em;
}
.metadata__hearts:hover {
color: red;
}
.metadata__pins:hover {
color: green;
}

Беліссімо!

ITCSS

ОК, тут ми зберемо всі думки разом. Ми майже біля фінішу! А тепер обговоримо ITCSS. Насамперед, що таке ITCSS? Приставка IT (лол) означає те, яким чином позначити стилі, як свої. А також приставка IT відповідає на питання про те, в якому порядку застосовувати мені мої стилі?

Нижче представлений відмінний графік, вкрадений прямо з блогу HarryRobertsиз статті Specificity Graph (вибачте, сподіваюся, ви не заперечуєте!).

По суті. Ось так виглядає графік оголошень (можливо):

Атомний OOBEMITSCSS

А так ваш графік оголошень «повинен» виглядати

Атомний OOBEMITSCSS

Графік оголошень це аналіз вашого CSS коду на оголошення нових селекторів. При використанні !important і повторення коду створюються ці жахливі піки. В результаті вам необхідно перекрити селектор ще раз, щоб відмінити попереднє перевизначення. Тепер бачите, чому це так проблематично? Не тільки тому, що це несемантический підхід і надто заплутано, але також це змушує вас писати менш продуктивний код. Крім того збільшується вага файлу стилів з-за всіх цих переопределений. Вага вашого файлу стилів можна уявити, як область під графіком.

Ви запитаєте як? У наведеному вище прикладі ми бачимо, що спочатку застосовуються базові стилі, і тільки потім застосовуються певні стилі в залежності від потреб до елементів або модифікаторів. В іншому випадку, ми розширюємо стилі з існуючого коду, який був створений раніше в потоці стилів. Такий підхід допомагає організувати модульність стилів, а також імпортувати перші пару стилів у якості помічників або змінних, які не відображаються в CSS (як селектори плэйсхолдеры для іконок і шрифтів). Я могла би (і написала) написати цілі статті на цю тему (а також я створила інструментарій, відзначає ваше авторство архітектури стилів, який змушує планувати маршрут написання стилів, перш ніж з головою зануритися в код).

Ну і ось ваш Атомний OOBEMITSCSS.