ݺߣ

ݺߣShare a Scribd company logo

Методології Front end

•
•
Web Systems
Web Systems

BEM MCSS SMACSS Atomic CSS AMCSS

1 of 28
Download to read offline
МЕТОДОЛОГІЇ 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-name block-name_modific-key_modific-value block-name__elem-name_modific-name block-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 ,
“Не важливо яку методологію Ви використовуєте, головне щоб вона у вас була” Юрій Артюх
Дякую за увагу skype: vitalka181094 email: kriskov.vitaliy@gmail.com

More Related Content

Методології Front end

  • 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. Основні поняття ● БЕМ сутність ● Мікс ● БЕМ дерево ● Реалізація блоку ● Технологія реалізації блоку ● Перевизначення блоку ● Рівень перевизначення блоку
  • 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
  • 17. Base - базові стилі що застосовуються на сторінці, переважно стосується HTML тегів, базовими стилями являються стилі які не змінюються в залежності від розташування елемента на сторінці на від їхнього стану, до базових стилів можна віднести вендорні стилі.
  • 18. Layout - стилі які описують структуру HTML сторінки та розміщення блоків на сторінці, автор рекомендує для Layout стилів використовувати префікс l-, layout- для кращого орієнтування в коді
  • 19. Module - блоки що можуть багаторазово використовуватись на сторінці, можуть містити елементи та підкласи(модифікатори) для задання особливих стилів в залежності від розташування модуля. - для назви підкласу та елементу модуля прийнято використовувати в якості префікса клас модуля.
  • 20. State - стилі стану, в цьому розділі описуються стилі стану окремих модулів та скилету сайту(layout) - для створення класу стану прийнято використовувати префікс is- для виділення його серед інших стилів - для стану який може бути задіяний лише до окремого модуля клас із цим станом прийнято починати з префіксом moduleName-, та поміщати його у файл модуля а не файл із загальними станами.
  • 22. OOCSS методологія для простого написання швидкого, маштабованого та структурованого коду по стандартам ООП
  • 24. Обєкт Обєкт - повторюваний візуальний паттерн, який абстрагується у якості незалажнего HTML, CSS і по можливості JS коду .
  • 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