Embed Size (px)
Citation preview
МЕТОДОЛОГІЇfront-end
BEM, SMACSS, OOCSS, MCSS, ATOMIC CSS
websystems
21.01.2016 - Віталька
ПЕРЕДІСТОРІЯ
Коли ще світ тримався на трох слонах,які стояли на велекій черепасі...
І навіть коли Віталька був ще маленьким
І плакав не від агропошуку і гульпу, а від того що пропустив мультики=(
fron-end розробники мирно собі верстали кожен як міг і навіть не підозрювали що колись їм доведеться думати про якусь там “МЕТОДОЛОГІЮ” і “АРХІТЕКТУРУ CSS”
Методологія
- це підхід у розробці, що дозволяє швидко створювати сайти з гнучкою та маштабованою архітектурою.
Навіщо?
“Писати css код легко. Маштабувати та підтримувати його- ні!”
Бен Фрейн
● Розробляти типові сайти швидко;
● Проект повинен жити довго та легко маштабуватись;
● Потрібно вміти легко маштабувати команду(на проекті може
працювати як 1 людина так і 10);
● Всередині команди повинні бути чіткі зони відповідальності;
● Код повинен використовуватись повторно.
Методології
● BEM● MCSS● SMACSS● Atomic CSS● AMCSS● ...● ...●
BEM
БЛОК МОДИФІКАТОРЕЛЕМЕНТ
може використовуватись у декількох місцях на сторінці
є частиною блоку і не може існувати, поза контекстом блоку
являє собою властивість блоку або елементу, що змінює його поведінку
Основні поняття
● БЕМ сутність● Мікс● БЕМ дерево● Реалізація блоку● Технологія реалізації блоку● Перевизначення блоку● Рівень перевизначення блоку
Угода по іменуванню CSS селекторів
Блок
назва блока задається по схемі block-name і створює простір імен для створення елментів
{блок}
елемент
елемент
елемент елемент
елемент
Елемент
- це частина блоку яка самостійно існувати не може, проте може вміщати в собі інші блоки
- задається по схемі block-name__element-name
Модифікатор
- простір імен заданий блоком визначає відповідність модифікатора до певного блоку, або елементу
- модифікатор не може існувати самостійно- задається по схемі
block-name_modific-nameblock-name_modific-key_modific-valueblock-name__elem-name_modific-nameblock-name__elem-name_modific-key_modific-value
Приклад
SMACSS
Base- базові стилі що застосовуються на сторінці, переважно стосується HTML
тегів, базовими стилями являються стилі які не змінюються в залежності від розташування елемента на сторінці на від їхнього стану, до базових стилів можна віднести вендорні стилі.
Layout
- стилі які описують структуру HTML сторінки та розміщення блоків на сторінці, автор рекомендує для Layout стилів використовувати префікс l-, layout- для кращого орієнтування в коді
Module
- блоки що можуть багаторазово використовуватись на сторінці, можуть містити елементи та підкласи(модифікатори) для задання особливих стилів в залежності від розташування модуля.
- для назви підкласу та елементу модуля прийнято використовувати в якості префікса клас модуля.
State
- стилі стану, в цьому розділі описуються стилі стану окремих модулів та скилету сайту(layout)
- для створення класу стану прийнято використовувати префікс is- для виділення його серед інших стилів
- для стану який може бути задіяний лише до окремого модуля клас із цим станом прийнято починати з префіксом moduleName-, та поміщати його у файл модуля а не файл із загальними станами.
Приклад
OOCSS
методологія для простого написання швидкого, маштабованого та структурованого коду по стандартам ООП
Ідея
розподіл структури та оформлення
ОбєктОбєкт - повторюваний візуальний паттерн, який абстрагується у якості незалажнего HTML, CSS і по можливості JS коду .
OOCSS обєкти
Посилання
Почитати- BEM, OOCSS, OOCSS framework, SMACSS ru, SMACSS, MCSS, AMCSS, Atomic CSS
Подивитись - OOCSS(Nicole Sullivan), BEM практика, Пишимо BEM правильно, BEM & React, SMACSS & BEM, CSS Architecture with SMACSS ,
“Не важливо яку методологію Ви використовуєте, головне щоб вона у вас була”
Юрій Артюх
