Класний CSS підхід до таблиць стилів Sass як до програми - CSS-LIVE

Класний CSS: підхід до таблиць стилів Sass як до програми

Класний CSS, будь ласка

У вищезгаданій статті («Атомний OOBEMITSCSS») я пояснювала, як я розмічаю компоненти (на прикладі Pinterest) та оформляю їх відповідно. Я, як і раніше, використовую цей пост як зручне керівництво для всіх, хто цікавиться нашою фронтенд-архітектурою, яка відтоді пройшла повномасштабну перевірку на великій бібліотеці патернів.

підхід
Один приклад із статті на Sitepoint

В результаті я зіткнулася з необхідністю пояснювати цю систему (і сам Sass) людям із традиційною програмістською освітою. Завдяки чому я усвідомила, наскільки система CSS-архітектури, яку я описала, схожа на програму та заснована на класах. Тому я хочу скористатися моментом, щоб дати їй заслужену назву, за яку мені не було б соромно, «Класний CSS », а також пояснити її так, щоб це виявилося трохи ближчим до традиційних програмістів.

У цієї посади три цілі:

  1. Відстояти @extend
  2. Познайомити зКласним CSS (вимовити набагато легше, ніж «Атомний OOBEMITSCSS»)
  3. Розповісти про масштабований, модульний і заснований на класах підхід до CSS

Класна кнопка

Ну що, давайте розберемо як це працює, на прикладі кнопки (адже кнопка - це CSS "hello world"):

Почнемо із заготівлі селектора з базовим кодом для кожної кнопки, використовуючи трохи підправлений синтаксис, схожий на БЕМ. Перша частина його імені буде об'єктом, на який ми посилаємось (button or btn), а після подвійного дефісу буде модифікатор (в даному випадку base, тобто базовий).Зауважте : змінні іменуються так само — тип змінної у ролі основи (у прикладі нижче це color).

Ця базовакнопка – наш клас кнопок. До цього ми будемо додавати все інше для кожної кнопки, оскільки кожна кнопка— екземпляр цього класу. Кожен елемент-кнопка має тип «кнопка», тому вони мають спільні риси (суцільна обведення, прозорий фон, тощо.). Кожна кнопка вбирає одні й самі загальні властивості і надбудовується з них. Вони не перезаписують ці властивості, а додають нові. Всі вони - кнопки ++, що успадковують властивості базової кнопки. (Чи треба ще якось повторити цю ж думку?)

А ось їх використання:

стилів
Ілюстрація прототипного успадкування з «Ви не знаєте JS: Ключове слово this та прототипи об'єктів»

Якщо ви пишете їх "класним" способом, у кожногокомпонента (hero, sidebar, global-nav) буде його власний частковий файл .scss, де створюються екземпляри класу для реального використання. Це може виглядати так:

Так, а що щодо міксинів?

Вам може бути цікаво, чому б замість цього не використовувати @mixin ? Наш спосіб розбивки класів по файлах ближче до того, для чого придуманий і призначений @extend. Можна створювати міксини в заготовках, над якими ми надбудовуємо стилі, а потім використовувати @extend , щоб створити екземпляри класів з цими стилями.

На захист @extend

Застосування @extend дозволяє зменшити підсумковий файл CSS і зробити код чистішим, якщо розуміти, що відбувається (ми доповнюємо стилі, а не дублюємо їх). Можна заперечити, що це не проблема, є gzip — але завжди покладатися на gzip не можна, адже доступу до налаштувань сервера може не виявитися.

Щоб розуміти і застосовувати @extends з користю, потрібно добре розібратися, що саме відбувається і в чому корінні відмінності між @mixin і @extend . Ось наочний приклад:

стилів

класний

@mixin - це якштампування : він створює дублікат блоку з властивостями, з необов'язковою добавкою у вигляді переданих аргументів. @extendдодає той елемент, який ви розширюєте до блоку властивостей. Це все одно, що сказати «Так, і ще ___ ».

Це означає, що наш підсумковий CSS-файл буде меншим, адже ми не повторюємо блок коду щоразу, коли він використовується. З @extend ми можемо просто посилатися на властивості. Директиви @extend ідеально підходять для цього! Їхнє логічне призначення цілком розумне.#teamExtend

Недолік тут у тому, що ми не знаємо, де знаходиться блок властивостей, оскільки ми не створюємо нову копію блоку коду в директиві, а лише посилаємося на нього як джерело стилів (ось чому не можна використовувати @extend в медіавиразах). Але це неважливо, якщо ми дотримуємося принципів Класного CSS. Ви розширюєте класи-заготівлі, перетворюючи їх на справжні, придатні до використання класи, і працюєте з екземплярами цих класів, а @mixin директиви резервуються для іншої мети. З їхньою допомогою ми вибудовуємо в класах-заготовках той код, який потім розширюємо.

У випадку Класного CSS,міксини нагадують конструктори і використовуються тільки в заготовках селекторів.

Наприклад, давайте створимо міксин кнопки, щоб на його основі було легше добудовувати основну та додаткову кнопки:

І підсумковий файл CSS виглядає так:

Переваги

Звичайно, у цієї системи свій характер, і вона може здатися складною для непосвячених, але як тільки ви почнете з нею працювати, вона допоможе придумувати імена і вирішувати питання архітектури

Серед переваг:

  • Гарантує таку організацію коду, що в ньому не станеться конфлікту специфічностей і нічого не перевизначатиметься(див. ITCSS) - отже, CSS стає простіше, ефективніше, а розмір підсумкового CSS-файлу - менше.
  • Послідовна система найменування (БЕМ) зберігає однаковість у команді та зменшує плутанину завдяки загальним правилам.
  • Система організована, легко підтримується та масштабується

Пишіть класний код, і нехай Sass допоможе вам втілити найзухваліші ідеї! 💁