Розуміння методології написання CSS

У цьому пості ми побачимо методології написання CSS, деякі відомі методології, і як вони можуть бути корисними для нас в оптимізації нашого CSS-коду. Давайте почнемо з найпростішого питання, щоб отримати прокатку м'яча. Що таке методологія?

Методологія система методів. Подумайте про метод як про спосіб зробити щось в систематичній манері, в певному заданому способі здійснення речей, щоб досягти бажаного результату.

Щоб отримати кращі результати, ми вдосконалюємо наші методи, плануючи їх краще, зміна порядку, спрощення кроків - що б не працювало швидше і більше ефективний.

Методологія CSS

Тепер поговоримо про методологію CSS. Так само, як і в усьому, що існує в житті, ми також маємо метод написання CSS: деякі CSS-файли скидання записів спочатку, деякі стилі розташування місць, деякі починаються з двох-трьох класів для стилізації елемента, деякі записують всі CSS-коди. єдиний файл.

Наші переважні методи були або встановлені на нашому часі, або під впливом інших або необхідні на нашому робочому місці або через все вищезазначене. Але з часом, CSS ветерани сформулювали методології написання CSS це більше гнучкий, визначений, багаторазовий, зрозумілий і керованим.

Ми розглянемо ті сформульовані методики, які включатимуть:

1. OOCSS (об'єктно-орієнтований CSS)
2. BEM (блок, елемент, модифікатор)
3. ACSS (атомний CSS)
4. SMACSS (масштабована і модульна архітектура для CSS)

Примітка: Жодна з концепцій, зазначених нижче, не слід плутати з будь-якою структурою, бібліотекою або інструментом, які можуть мати таку ж назву та концепцію, що й ці методології. Цей пост стосується лише методологій написання CSS.

1. OOCSS

Розроблена Ніколь Салліван в 2008 році, ключові поняття OOCSS (об'єктно-орієнтований CSS) включає CSS об'єкт ідентифікація, поділ структури та візуальних стилів і уникнення стилів, заснованих на розташуванні.

В OOCSS - це перший крок, який Ніколь пропонує нам зробити ідентифікувати об'єкти в CSS.

“В основному, "об'єкт" CSS є повторюваним візуальним шаблоном, який можна абстрагувати в незалежний фрагмент HTML, CSS і, можливо, JavaScript. Цей об'єкт може бути повторно використаний на всьому сайті. - Ніколь Салліван, Github (OOCSS)“

Візьмемо, наприклад, цю структуру з цього сайту. Ось щось, що є повторюваним візуальним шаблоном і має свій власний незалежний HTML та / або CSS:

У нас є два типи об'єктів, більший перегляд назв, які ми назвемо пост-попередній перегляд і бічну панель з назвами, які ми назвемо пост-попередній перегляд.

Ми потребуємо окрема структура і шкіра (тобто стилі, які створюють вигляд об'єктів). Два типи об'єктів мають різні структури, одна з яких знаходиться у більшому вікні, навіть якщо вони виглядають подібно, із зображеннями ліворуч і заголовками праворуч.

Наведемо зображення обох об'єктів класом зображення попереднього перегляду і додайте код, який розміщує зображення зліва. Це зупиняє нас від необхідності повторювати код, куди помістити зображення всередині об'єктів у CSS. Якщо є інші подібні об'єкти, ми повторно використовуємо зображення попереднього перегляду для них.

Поділ шкіри також можна зробити для більш простих стилів кордонів або фонів. Якщо у вас є кілька об'єктів з однаковою синьою облямівкою, створення окремого класу для синьої рамки і додавання до об'єктів буде зменшити кількість кодувань блакитних кордонів в CSS.

Ніколь також пропонує ні додавати стилі на основі розташування, наприклад, замість націлювання всіх посилань всередині конкретного div, щоб виділити, дайте ці посилання a клас висвітлення з відповідними стилями CSS. Таким чином, коли потрібно виділити посилання в іншій частині сторінки, ви можете повторно використовувати клас висвітлення.

Плюси OOCSS: Багаторазові візуальні коди укладання, гнучкі коди розташування, зменшення глибоких вкладених селекторів.

Мінуси OOCSS: Без достатньої кількості повторюваних візуальних шаблонів, роздільна структура і візуальні коди стилів здаються непотрібними.

2. БЕМ

Розроблені розробниками на Яндекс в 2009 році, ключові поняття для BEM (блок, елемент, модифікатор) охоплюють ідентифікацію блок, елемент & модифікатор і назвати їх відповідним чином.

A “блок” є, по суті, таким же, як “об'єкт”(з прикладу раніше), a “елемент” відноситься до компонентів блоку (зображення, назва, текст попереднього перегляду вище) попередній перегляд- об'єктів). A “модифікатор” може використовуватися, коли стан блоку або елемента змінюється, наприклад, коли ви додаєте активний клас до пункту меню, щоб виділити його, активний клас виступає як ваш модифікатор.

Після того як ви визначили компоненти, назвіть їх відповідно. Наприклад:

• блок меню матиме клас меню
• його предмети будуть мати клас menu__item (блок і елемент розділені подвійним підкресленням)
• Модифікатор для відключеного стану меню може мати клас menu_disabled (модифікатор, розділений одним підкресленням)
• Модифікатор для відключеного стану пункту меню може бути menu__item_disabled.

Для модифікаторів ми також можемо використовувати key_value формат для іменування. Наприклад, щоб відрізнити будь-які пункти меню, які посилаються на застарілі статті, ми можемо надати їм клас menu__item_status_obsolete, а для стилізації будь-яких пунктів меню, які вказують на очікувані документи, може бути ім'я класу menu__item_status_pending.

Ім'я може бути змінено до того, що працює для вас. Ідея - вміти ідентифікують, блоків, елементів і модифікаторів з імен класів. Перевірте деякі з систем імен, перелічених на сайті BEM.

Сайт BEM також перераховує як сегрегація блоку, елемента і модифікатора також може бути внесена до файлової системи CSS. Блоки подібні “кнопки” і “вхідних даних” можуть мати власні папки, що складаються з файлів (.css, .js), пов'язаних з цими блоками, що полегшує роботу, коли ми хочемо імпортувати ці блоки в інші проекти.

Плюси BEM:Простота використання імен класів і зменшення глибоких CSS-селекторів.

Мінуси BEM:Для того, щоб зберегти імена з розумним виглядом, БЕМ радить, щоб ми блокували, щоб елемент містився неглибоко.

3. ACSS

Зробив відомий Yahoo, десь наприкінці першого десятиліття 21^вул століття, ключові поняття ACSS складаються з створення класів для найбільш атомного рівня стилізації, тобто пари властивостей-вартості, а потім використовуючи їх у HTML, як потрібно.

Важко визначити, коли ACSS (Atomic CSS) був вперше розроблений, оскільки концепція використовується ще деякий час. Розробники використовували подібні класи .clearfix overflow: hidden довго. Ідея ACSS полягає в тому, щоб мають клас для кожної пари багаторазового використання, що не пов'язаний із змістом нам знадобиться на нашому сайті, і додати ці класи, коли це необхідно, до елементів HTML.

Нижче наведено приклад класів на основі ACSS і способу їх використання в HTML.

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

Як ви можете бачити, кількість класів буде підвищена за допомогою цього методу, і HTML буде переповнений всіма цими класами. Цей метод не є 100% ефективним, але може бути корисним, якщо хочете. Зрештою, Yahoo використовує це.

Плюси ACSS:Стилізація HTML без залишення HTML.

Мінуси ACSS:Занадто багато класів, не дуже акуратні, і ви можете ненавидіти.

4. SMACSS

Розроблений в 2011 році Джонатан Снук SMACSS (Масштабована і Модульна Архітектура для CSS) працює шляхом виявлення 5 різних типів правил стилю. На їх основі створюються імена класів і система реєстрації.

“SMACSS - це спосіб вивчити процес проектування та спосіб пристосування цих жорстких рамок до гнучкого процесу мислення. - Джонатан Снук”

SMACSS визначає саме 5 типів правил база, макет, модуль, стан, і теми.

• Базові стилі - це типи за замовчуванням, призначені для основних тегів HTML

  , .

• Стилі розкладки - це стилі, які використовуються для визначення макета сторінки, наприклад, для кодування, в якому піде верхній, нижній та бічний меню..
• Стилі модулів характерні для модулів, таких як галерея або слайд-шоу.
• Стилі станів призначені для виділення елементів зі змінними станами, наприклад, прихованими або відключеними.
• Тема використовується для зміни візуальної схеми сторінки.

Різні правила стилів можна ідентифікувати за допомогою префікса в назві класу, наприклад, l-header (для компонування) або t-header (для теми). Ми також можемо організувати ці різні типи правил, розміщуючи їх у окремих файлах і папках.

Плюси SMACSS:Краще організований код.

Мінуси SMACSS: Ні, я не можу придумати.

Там є безкоштовна онлайн книга ви можете прочитати про SMACSS, або ви можете купити його електронну книгу версії, щоб вивчити його більше.

Висновок

Наведені вище методології CSS нададуть вам систему керувати та оптимізувати свої коди CSS. Вони можуть бути об'єднані разом, як OOCSS-SMACSS, або OOCSS-BEM, або BEM-SAMCSS відповідно до ваших потреб.

Існують також фреймворки та бібліотеки, якщо ви хочете автоматизовану систему для виконання методологій CSS, таких як:

• Рамка OOCSS
• Інструменти BEM
• Органічна структура CSS (наступна атомна концепція).