Оптимізація вашого робочого процесу за допомогою методологій CSS (BEM, SMACSS)
Вступ
Уявіть вашу кухонну стільницю, засипану купами інгредієнтів – борошно, яйця, цукор, шоколад, прикраси, назвіть їх! Поза очевидним безладом є метод у вашому безладі. Ви маєте місію зробити найкращі цукрові печиво в світі. Однак уявіть собі, що ви ділитеся цим хаосом з іншим шеф-кухарем. Майже миттєво це перетворюється на кухонний кошмар. Ось де в гру вступають методології, такі як BEM і SMACSS. Вони організовують хаос CSS, переконуючись, що ваш код легко читати, підтримувати і ділитися з іншими розробниками.
Методології BEM і SMACSS зосереджуються на ідеї того, що написання структурованого та патернованого CSS може допомогти покращити зрозумілість коду та прискорити час розробки. Ці методології можуть зробити роботу з CSS більш приємним досвідом.
Блок, Елемент, Модифікатор (BEM)
Уявіть конструктор Лего. Кожен окремий елемент – це блок. Коли ці блоки об’єднуються, вони утворюють структуру. І коли до них додається колір або текстура, це стає модифікатором. Саме це сутність методології BEM, спосіб структурування CSS-класів, щоб зробити їх більш зрозумілими та відповідними структурі розмітки.
Як використовувати BEM
Три частини складають назву BEM: Блок, Елемент та Модифікатор. Блок – це абстракція верхнього рівня, елемент – це дитина блоку, а модифікатор, ви вгадали, модифікує блок або елемент. Назви зазвичай пишуться у форматі: block__element–modifier.
Пам’ятайте, тут мета не відтворювати ієрархію HTML, а надавати класи, які полегшують стилізацію елементів незалежно від їх місця в документі.
Масштабована та модульна архітектура CSS (SMACSS)
Лорди кілець узагальнюють SMACSS в кількох словах. Це ‘Одна методологія, що володіє ними всіма.’ SMACSS використовує більш орієнтований на стиль підхід і категоризує правила CSS на п’ять основних типів – Базові, Макет, Модуль, Стан та Тема.
Як використовувати SMACSS
Уявіть SMACSS як ваш аккуратний шафу, впорядкований за різними категоріями. Щодо CSS, Базові правила – це ваші основні білі футболки – вони формують основу. Правила Макету – це ваші комбінезони, що визначають основні розділи сторінки. Тепер Модуль – це ваші аксесуари, які використовуються для зміни зовнішнього вигляду, тоді як Правила Стану – це ваші сезонні одяг, які показують поточний стан модуля. Що стосується Правил для Теми, вони застосовуються лише, якщо ваш веб-сайт має багатотемний дизайн.
Висновок
Робота з CSS може бути схожа на спробу приборкати дикого, барвистого та модно-божевільного коня. Але завдяки методологіям CSS, таким як BEM і SMACSS, ви зможете ввести порядок в свої CSS-стайлі. Це схоже на створення рецепту цукрового печива з легко зрозумілим та добре структурованим рецептом. Пам’ятайте, будьте майстром-конструктором Лего, коли використовуєте BEM, та організовуйте свій гардероб (або, краще кажучи, ваші стилі) за допомогою SMACSS.
Так юні Падавани, нехай ці методології CSS оптимізують ваш робочий процес стилізації, даруючи вам більше часу для обдумування тонкощів JavaScript, PHP, HTML або для швидкого перекусу! Завжди пам’ятайте, що добре структурований CSS – це ваше чарівне зілля для того, щоб стати помітним веб-розробником!
