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

МЕТОДОЛОГІЇ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 ,

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

Юрій Артюх

Дякую за увагу

skype: vitalka181094email: kriskov.vitaliy@gmail.com