BEM MCSS SMACSS Atomic CSS AMCSS

1. МЕТОДОЛОГІЇ
front-end
BEM, SMACSS, OOCSS, MCSS, ATOMIC CSS
websystems
21.01.2016 - Віталька

2. ПЕРЕДІСТОРІЯ
Коли ще світ тримався на трох слонах,
які стояли на велекій черепасі...

3. І навіть коли Віталька був ще маленьким
І плакав не від агропошуку і гульпу, а від
того що пропустив мультики=(

4. fron-end розробники мирно собі верстали кожен як міг і навіть не
підозрювали що колись їм доведеться думати про якусь там
“МЕТОДОЛОГІЮ” і “АРХІТЕКТУРУ CSS”

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

6. Навіщо?
“Писати css код легко. Маштабувати та підтримувати його- ні!”
Бен Фрейн

7. ● Розробляти типові сайти швидко;
● Проект повинен жити довго та легко маштабуватись;
● Потрібно вміти легко маштабувати команду(на проекті може
працювати як 1 людина так і 10);
● Всередині команди повинні бути чіткі зони відповідальності;
● Код повинен використовуватись повторно.

8. Методології
● BEM
● MCSS
● SMACSS
● Atomic CSS
● AMCSS
● ...
● ...
●

9. BEM
БЛОК МОДИФІКАТОРЕЛЕМЕНТ
може використовуватись
у декількох місцях на
сторінці
є частиною блоку і не
може існувати, поза
контекстом блоку
являє собою властивість
блоку або елементу, що
змінює його поведінку

10. Основні поняття
● БЕМ сутність
● Мікс
● БЕМ дерево
● Реалізація блоку
● Технологія реалізації блоку
● Перевизначення блоку
● Рівень перевизначення блоку

11. Угода по іменуванню
CSS селекторів

12. Блок
назва блока задається по схемі block-name і створює простір імен для
створення елментів
{блок}
елемент
елемент
елемент елемент
елемент

13. Елемент
- це частина блоку яка самостійно існувати не може, проте може вміщати в
собі інші блоки
- задається по схемі block-name__element-name

14. Модифікатор
- простір імен заданий блоком визначає відповідність модифікатора до
певного блоку, або елементу
- модифікатор не може існувати самостійно
- задається по схемі
block-name_modific-name
block-name_modific-key_modific-value
block-name__elem-name_modific-name
block-name__elem-name_modific-key_modific-value

15. Приклад

16. SMACSS

17. Base
- базові стилі що застосовуються на сторінці, переважно стосується HTML
тегів, базовими стилями являються стилі які не змінюються в залежності від
розташування елемента на сторінці на від їхнього стану, до базових стилів
можна віднести вендорні стилі.

18. Layout
- стилі які описують структуру HTML сторінки та розміщення блоків на
сторінці, автор рекомендує для Layout стилів використовувати префікс l-,
layout- для кращого орієнтування в коді

19. Module
- блоки що можуть багаторазово використовуватись на сторінці, можуть
містити елементи та підкласи(модифікатори) для задання особливих
стилів в залежності від розташування модуля.
- для назви підкласу та елементу модуля прийнято використовувати в
якості префікса клас модуля.

20. State
- стилі стану, в цьому розділі описуються стилі стану окремих модулів та
скилету сайту(layout)
- для створення класу стану прийнято використовувати префікс is- для
виділення його серед інших стилів
- для стану який може бути задіяний лише до окремого модуля клас із цим
станом прийнято починати з префіксом moduleName-, та поміщати його у
файл модуля а не файл із загальними станами.

21. Приклад

22. OOCSS
методологія для простого написання швидкого,
маштабованого та структурованого коду по
стандартам ООП

23. Ідея
розподіл структури та
оформлення

24. Обєкт
Обєкт - повторюваний візуальний
паттерн, який абстрагується у якості
незалажнего HTML, CSS і по
можливості JS коду .

25. OOCSS обєкти

26. Посилання
Почитати- BEM, OOCSS, OOCSS framework, SMACSS ru, SMACSS, MCSS,
AMCSS, Atomic CSS
Подивитись - OOCSS(Nicole Sullivan), BEM практика, Пишимо BEM
правильно, BEM & React, SMACSS & BEM, CSS Architecture with SMACSS ,

27. “Не важливо яку методологію Ви
використовуєте, головне щоб вона у вас була”
Юрій Артюх

28. Дякую за увагу
skype: vitalka181094
email: kriskov.vitaliy@gmail.com