CCSS або компонентний CSS. це архітектура, яка спрощує складання CSS для великих веб-додатків.
Великі веб-додатки, як правило, містять багато CSS файлів, над якими працюють різні розробники.
З появою такої великої кількості фреймворків, посібників, інструментів і методологій (OOCSS, SMACSS, BEM і т.д.), розробники потребують CSS архітектурі, яка забезпечить просте супровід, управління і масштабування проектів.
Як інженер інтерфейсів, я вважаю, що в бізнес-процеси на основі компонентів, це саме те, що потрібно. Веб-компоненти являють собою набір стандартів, які працюють через W3C. Вони дозволяють нам обернути розмітку і стилі в багато разів використовувані елементи HTML. дійсно інкапсульовані.
Це означає, що ми повинні задуматися про розробку CSS на основі компонентів. У той час як розробники браузерів реалізують ці стандарти, ми можемо використовувати інкапсуляцію софта.
Давайте розглянемо, що таке CCSS і як ви можете використовувати його в налаштуванні архітектури CSS для складного веб-додатки.
елементи CCSS
Нижче наведені основні елементи, які використовуються або повністю, або в зміненому вигляді, щоб досягти оптимальної конфігурації архітектури CCSS.
SMACSS, був створений Джонатаном Снук. і розшифровується, як Scalable and Modular Architecture for CSS (Масштабируемая і модульований архітектура для CSS). Це, скоріше, керівництво по стилям, ніж фреймворк. Для отримання більш детальної інформації про те, як він використовується в структурі CCSS. прочитайте статтю SMACSS.
BEM був створений розробниками Yandex. розшифровується, як "Block", "Element", "Modifier" ( "Блок", "Елемент", "Модифікатор"). Ця методологія пропонує новий підхід при розробці веб-інтерфейсів. Більш детальну інформацію по BEM ви можете знайти в відмінній статті Гаррі Робертса.
Sass - це CSS з суперсилами. Я дуже рекомендую саме його, але ви можете використовувати також Less. Додаткову інформацію ви можете знайти в документації Sass.
Compass не містить визначення класів; це розширення для Sass. надає багато додаткових утиліт. Воно використовується для створення домішок і компіляцій Sass.
Домішки Compass практично завжди повинні використовуватися, коли нам потрібні префікси. Знову ж таки, його застосування дуже бажано, або на свій розсуд ви можете використовувати Bourbon.
принципи CCSS
Тепер давайте розглянемо основні принципи CCSS.
компонентна основа
Створення малих і незалежних компонентів, які можуть бути застосовані в різних місцях. Багаторазово використовується компонент CSS може розміщуватися в різних частинах дерева DOM і не вимагає використання тільки певних типів елементів.
При необхідності потрібно використовувати додаткові елементи HTML. щоб уможливити багаторазове використання компонента.
Модульність і ізольованість
Компоненти повинні мати все необхідне для певної частини призначеного для користувача інтерфейсу і фокусуватися на одному елементі. Кожен компонент повинен бути ізольований, тобто він повинен бути незалежний від інших компонентів.
Ізольованість навіть більш важлива, ніж можливість повторного використання коду, так як повторне використання може збільшити залежність і кількість зв'язків, що в кінцевому підсумку робить CSS менш керованим.
можливість компонування
При складанні CSS має зменшуватися кількість часу, необхідне для написання CSS. і відповідно потрібно більше часу на зміну HTML-класів елементів, модифікуючи їх або додаючи нові стилі.
Для всіх розробників набагато простіше складати CSS-код, схожий на блоки конструктора «Лего», ніж брати участь в CSS війні. Класи CSS є будівельними блоками, які використовуються для складання стилів.
передбачуваність
Передбачуваність означає, що, коли ви складаєте CSS. ваші правила стилів поводяться, як ви очікуєте. Це важливо для великих додатків, які містять багато сторінок. Уникайте використання надмірно складних селекторів і імен класів, так як вони можуть зробити CSS-код непередбачуваним.
документування
Більшість людей вважають, що CSS не вимагає пояснень. Насправді це, як правило, не так! Компоненти CSS повинні бути чітко задокументовані, з тим, щоб в описах було детально роз'яснено, що вони роблять і як вони повинні використовуватися.
структура каталогів
Нижче для полегшення сприйняття наводиться приклад структури папок. Я також розмістив приклад налаштування CCSS в сховище на GitHub:
Потрібно тільки відредагувати / скласти файли в папці scss / дерева папок. наведеного вище. Це дозволяє легко оновлювати зовнішні бібліотеки, розташовані в папці ext /.
Багато додатків підтримуються зовнішніми CSS -фреймворкамі, такими як Bootstrap або Foundation. тому я додав їх в цьому прикладі в папку ext /. Хоча звичайно здорово, якщо все CSS-коди пишуться з нуля; тим не менш, ви можете використовувати описаний вище метод.
Папка components / відмінно підходить для застосування AngularJS. але її можна налаштувати під інші фреймворки або додатки. Більш докладно я розповім про це в розділі «Архітектура».
На сторінці HTML. що включає в себе всі файли .css з папки style /. містяться всі скомпільовані CSS-коди (з Grunt, Compass і т.д.). Ніколи не змінюйте їх.
Конвенція імен - спрощений BEM
- u-className - глобальні базові класи / класи утиліт;
- img-className - глобальні класи зображень;
- animate-className - глобальні класи анімації;
- ComponentName - стандартні компоненти (B);
- ComponentName-elementName - елементи компонента (E);
- ComponentName - modifierName - модифікатор компонента (М).
Зверніть увагу на назву стилю компонентів UpperCamelCase. це основний елемент; це означає, що він є верхньою елементом компонента. Імена елементів і модифікаторів - elementName і modifierName. відповідно. Не використовуйте дефіс (-), щоб розділяти імена компонентів, так як він означає початок елемента / імені елементів.
Архітектура та дизайн
Давайте розглянемо архітектуру, побудовану згідно з принципами CCSS.
Grunt є відмінним елементом для запуску завдань, який автоматизує багато рутинних дії (наприклад, компіляцію CSS або перевірку HTML).
Є й інші елементи для запуску завдань; ідеальний робочий процес повинен включати в себе такий елемент, який буде відслідковувати файли, що знаходяться в процесі розробки, і перекомпіліровать CSS при внесенні змін.
організація файлів
Подивіться ще раз на структуру папок, яка є похідною від SMACSS. Зверніть увагу на папку ext /. яка містить всі зовнішні фреймворки (такі як Bootstrap). Для більш простого внесення змін зміни і розширення повинні вноситися не в неї, а в папку base /.
base / - це місце, де зберігаються глобальні базові стилі, використовувані додатком в цілому.
_base.scss - базові стилі тільки для селекторів елементів. Вони є свого роду "CSS-перемикачами".
_base-classes.scss - все класи утиліт, що використовуються по всьому додатком в різних уявленнях, компонентах і на сторінках. Використовується префікс імені класу u-.
images.scss використовується в якості джерела компіляції SCSS. Повинен визначати і вбудовувати все зображення сайту, як Data URI. /app/styles/images.css генерується з цього файлу.
_animate.scss містить всі класи анімації всього програми.
_bootstrap-overrides.scss містить тільки файли, змінені фреймворком. Іноді рівень, призначений селекторам фреймворка, настільки високий, що їх перевизначення вимагає додаткових селекторів. Зміна на глобальному рівні не може бути здійснено в контексті компонента SCSS. Замість цього всі глобальні зміни збираються тут.
компоненти
У прикладі налаштувань, розміщеному на GitHub. я, щоб було зрозуміліше, створив окремі папки.
Якщо ваш додаток невелика, ви можете зібрати їх все в одну папку. Всі компоненти, створені відповідно до модифікованої конвенцією імен BEM. використовуються в поєднанні з CamelCase.
Це дало мені величезний плюс, так як стимулювало інших членів команди слідувати синтаксису BEM. Це також дозволило уникнути плутанини при відході від використання типового стилю BEM з його символами -, - і __, які генерують такі імена класів, як module-name__child-name - modifier-name!
Також важливо, що порядок визначення класів CSS в компоненті відображає уявлення HTML. Це полегшує сканування, призначення стилів, редагування і застосування класів.
Нарешті, добре мати для веб-додатки велике керівництво по стилям і слідувати гайдлайни по CSS і Sass (наприклад, позбутися від необхідності використання @extend).
приклад CCSS
Дивіться код прикладу налаштувань CSS.
Ось приклад компонента на Sass:
Це код компілюється в наступний CSS:
І ваш HTML-код може виглядати приблизно так:
Ви можете задіяти спрощену BEM-домішка. яка для досягнення цієї мети використовує еталонний селектор, і є більш простий, ніж @ at-root.
У Sass 3.3+ працювати з BEM стало набагато простіше, що дає нам можливість підтримувати і супроводжувати код, який легко зрозуміти.
Ваша участь
Ваша участь у розвитку матеріалів, розміщених на GitHub. у вигляді прохань додати більше прикладів, роз'яснень тощо буде дуже корисним.
Переклад статті «Introducing CCSS (Component CSS)» був підготовлений дружною командою проекту Сайтобудування від А до Я.