Методологии верстки

А вы верите в систематизацию?или “Методологии верстки”

С чего все началось

● Масштабируемость● Количество кода● Поддержка кода● Структура кода

Команда:● Разный стиль кода● Разные подходы к организации вёрстки● Множество повторных реализаций● Трудности рефакторинга

Что же не так?

Методологии

БЭМ - методология

Блок-Элемент-Модификатор (методология разработана в Яндексе)

ru.bem.info

БЭМОсновная идея: - типовые проекты должны разрабатываться

быстро, но жить долго

Принципы:- особое именование классов- независимость блоков- повторное использование существующего

кода- масштабируемость команд разработчиков- точечные изменения с минимальными

затратами

Блокчасть страницы, являющаяся логически независимой

от остального наполнения

Элементчасть блока, отвечающая за отдельную

функцию, он может находиться только в составе блока и не имеет смысла в отрыве от

него

Модификаторсвойство блока или элемента, отвечающее за его внешний вид или поведение, описывают

состояние блока или элемента

Система именованияИмя блокаформируется как префикс-имя-блока.b-menu { ... }.b-text-input { ... }

Имя элементасоздается по схеме: префикс-имя-блока__имя-элемента.b-menu__item { ... } .b-text-input__label { ... }

*Элементы элементов не используются .b-block__elem1__elem2

Система именованияИмя модификатора блокапрефикс-имя-блока_имя-модификатора_значение-модификатора.b-menu_layout_horiz{ ... }.b-text-input_disabled{ ... }

Имя модификатора элементапрефикс-имя-блока__имя-элемента_имя-модификатора_значение-модификатора.b-menu__item_state_current{ ... } .b-text-input__label_active{ ... }

БЭМ - инструментыДля сборки- bem-tools - enb-bem

Оптимизаторы- CSSO- SVGO

Шаблонизаторы- BEM-XJSTе- XJSTе

БЭМПлюсы:- достаточно одного класса;- cпецифичность CSS-правил: проблема и

решение;- прощай каскад?!

- Абсолютно Независимые Блоки (коцепция

АНБ)

БЭММинусы

БЭММинусы:- “длинные” названия классов- сложность освоения командой

AMCSS

Модули атрибутов для CSS (Глен Маддерн)

amcss.github.io

AMCSSОсновная идея: - использование кастомных атрибутов

Принципы:- Modules (блоки) - Variations (модификаторы) - Traits (пространства имен)

AMCSS (концепция)Modules - блоки и элементы (БЭМ). Для описания модулей используются HTML атрибуты.Variations - модификаторы (БЭМ). Представлены значением атрибутов, и изменяют/переопределяют изначальные стили Modules. Traits<div class="u-posAbsoluteCenter" am-position="absolute center"> <div class="u-textTruncate u-textCenter" am-text="truncate center"> Very centered text. </div></div>

AMCSS

Используется малоизвестный селектор «~=», который работает как атрибут класса: выбирает элементы, значения атрибутов которых содержат указанные слова, разделенные пробелами

Группировка значений по атрибутам

AMCSSПлюсы:- хорошо читаемый и поддерживаемый кот код - возможность переопределения классов- повторное использование существующего

кода

Минусы:- специфичность использования кастомных

атрибутов

OCSS

Объектно ориентированный CSSby Nicole Sullivan

OOCSSОсновная идея: многократность использования написанного кода.

Принципы:● объект - повторяющиеся стили● отделение структуры, от оформления;● отделение контейнеров от содержимого.

.big-parent-class .cool-child-class {//styles}

.cool-cahild-class {//styles}

Оформление

Структура

OOCSSСоветы при использовании● Принцип выбора

(для похожих элементов, например, один вариант стиляlink link link -> link)

● Избегайте прикрепления классов к элементам(div.cool-class -> .cool-class)

● Используйте сетки● Использовать принцип одной страницы

OOCSSПлюсы:- нет определенных правил - более быстрые страницы- легко обслуживаемые таблицы стилей- низкий порог вхождения

Минусы:- нет определенных правил- html обрастает классами- отслеживание существующих модулей

Atomic CSS

Атомарный CSS (Тьерри Коблентц)

acss.io

Atomic CSSОсновная идея: - повторное использование стилей

Принципы:- разделение стилей- для каждого повторно используемого

свойства должен быть сформирован отдельный класс

- один класс - одно свойство

Atomic CSS- один класс - один стиль- каскад- независимые классы

Atomic CSSПлюсы:- небольшой объем CSS- легко вводить изменения- возможность повторного использования

Минусы:- семантика, настройки отображения

элементов переносятся непосредственно в HTML

OPOR

Оne Page Of Rules by Артём Сапегин

OPORОсновная идея:структурирование и систематичность селекторов. Совмещает в себе лучшие (по мнению автора) черты БЭМа, OOCSS.

Принципы:Именование классов основных блоков:Почти как в БЭМе: блоки (.block), элементы (.block__elem),

модификаторы (.block_mod).

OPORИспользование каскада- Контекст- Пользовательский контент

Примеси По принципу OOCSS

СостоянияПрефикс “.is-”.is-expanded, .is-visible, .is-highlighted

OPORJS-селекторыПрефикс “.js-” .js-files, .js-select

ОбёрткиНе несут никакой семантики, используются для оформления .header-i

Порядок классов: блоки, примеси, JS-хуки, состояния:<div class="upload-files scrollable js-files is-hidden">

OPORПлюсы:- Четкие правила именования- Легкие правила

Минусы:- Задает только правила именования- Хорошо подходит только для небольших страниц и проектов

MCSS

Многослойная система организации CSS

by OK.RU

MCSSОсновная идея:распределение стилей по уровням. Многослойная система организации CSS основана на принципах OOCSS и БЭМ.

Принципы: - Фундамент - Слой 1 - Слой 2 - Слой 3- Контекст

MCSSФундамент:- Корневые малоизменяемые стили- Располагаются в самом начале

Контекст:- браузеры, особенности девайса, среда, Media queries- располагаются рядом с модифицируемым(изменяемым)

классом по всему файлу

MCSSСлой 1 - базовый:- Абстрактные названия. - Самые переиспользуемые

элементы - Каскад от 2 и 1 слоя

MCSSСлой 2 - проектный:- Изолированные модули

(компоненты)- Уникальные названия. - Каскад только от 2го слоя

MCSS Слой 3 - косметический:- простые, маловлияющие стили- по принципу OOCSS

MCSS Слой 3 - косметический:- простые, маловлияющие стили- по принципу OOCSS

MCSSПлюсы- хорошо изолированные модули- строго определенная логика

Минусы- немного непривычное расположение классов - сложная логика распределения по слоям и правил

взаимодействия между слоями

SMACSS

Масштабируемая и модульная архитектура для CSS

(Джонатан Снук)

smacss.com

SMACSSОсновная идея:- разделение стилей на 5 составляющих Принципы:- Base rules - Layout rules- Modules rules- State rules- Theme rules

Разделение стилей на 5 частей

Base rules - Layout rules - Modules rules - State rules -

Theme rules

SMACSS структура

Base rulesстили основных элементов сайта —

body, input, button, ul, ol и др., reset.css

Layout rulesстили макета - здесь находятся стили глобальных элементов - шапки, футера, сайдбара и т.п

Modules rulesстили модулей - блоков, которые могут использоваться несколько

раз на одной странице

State rulesстили состояния - прописываются

различные состояния модулей и скелета сайта

(допустимо использование «!important»)

Theme rulesописываются стили оформлений

SMACSSПлюсы:- управляемый код- расширяемый код- возможность повторного использования

- дополнительные уровни семантики

Минусы:- непривычно использовать- надо думать и следовать правилам :)

FUN

Плоская иерархия селекторов, служебные стили, компоненты с

неймспейсами (Бен Фрейн)

benfrain.com

FUNОсновная идея: - упрощение создания стилей и их поддержки,

автор взял лучшее от БЭМ и SMACSS

Принципы:- Flat hierarchy of selectors - Utility styles - Name-spaced components

FUNF - Flat hierarchy of selectors - плоская иерархия селекторов U - Utility styles - служебные классы

N - Name-spaced components - компоненты с неймспейсами

FUNПлюсы:- удобно писать- удобно поддерживать- мало требований

Минусы:- для небольших проектов

SASS ориентированная методология

by Matthieu Larcher & Fabien Zibi

DoCSSa

DoCSSaОсновная идея:Основная идея - разделение внешнего вида и структуры. Методология основана на использовании препроцессора SASS

Принципы:Элементы страницы рассматриваются как компоненты. Описание компонентов состоит из двух частей (из двух mixins) - внешний вид и структура.

DoCSSaФайловая структура==== INIT // сброс

==== BASE // базовые стили - переменные,

цвета, шрифты

==== COMPONENTS // переиспользуемые

компоненты

/component_name

- /папка с mixins оформлений

- структурный mixin

==== SPECIFICS // специальные стили,

используемые в проекте

+---init

¦ ¦ _reset.scss

+---base

¦ ¦ __base.scss

¦ +---project

¦ ¦ _fonts.scss

¦ ¦

_mixins.scss

+---components

¦ +---button

¦ ¦ _button.scss

¦ ¦ +---skins

¦ ¦ ¦

_b_skin.scss

¦ +---tabs

¦ _tabs.scss

+---specifics

¦ ¦

__specifics.scss

¦ ¦ _main.scss

| | _inbox.scss

DoCCSaРазличный внешний вид для компонентов с одинаковой структурой@include tabs('.articleTabs', $defaultSkin: false);@include tabs-skin-alternate('.articleTabs');в описании структуры компонента проверяем:

@if $defaultSkin != false { @include tabs-skin-default($selector);}

DoCCSaИменование- Внешний вид

БЭМ

- Структура состояния записываются с помощью патерна "_is_" .mainMenu_item _is_current.

Я руководитель команды необученных коал, как мне использовать силу DoCSSa?● Пока ваши коалы учат SASS, они могут продолжать писать

старый css в папке 'specifics'.● Как только один из них почувствует, что он готов, он может

начать писать компоненты, которые могут использовать все● Пройдет немного времени и другие коалы тоже захотят

писать такие компоненты● Сложив все знания будет намного легче писать компоненты

и переделывать старый код в компоненты● Не забывайте периодически давать своим коалам много

свежего эвкалипта

DoCSSaПлюсы:- четкие правила- полная автономность компонентов- продуманный переход

Минусы:- необходимо знание препроцессора SASS

Инструменты- Препроцессоры- Библиотеки готовых компонентов- Плагины для сред разработки- Инструменты для проверки

синтаксиса

- https://github.com/stubbornella/oocss- AbsurdJS - for Atomic CSS- https://github.com/benschwarz/am-grid - for AMCSS- БЭМ-инструменты

Как принять эту веруПлан:1) Плакать, паниковать, страдать, ныть, жаловаться,

сокрушаться о выбранной профессии2) Успокоится и изучить правила. Донести правила до команды3) Разрабатывать новые страницы элементы в соответствии с

правилами выбранной методологии4) Все элементы, которые затрагиваются при внесении

изменений, багфиксинге и т.д. стараться переписывать под выбранную методологию

5) В свободное время - рефакторить и не забывать тестировать)6) Спрашивать совета и ревью

Выводы- Это полезно- Это удобно- Это заставляет думать- Можно придумать что-то свое- Можно помогать другим

Спросить очень просто

Спросить очень просто

Спасибо за внимание!Ирa

@lev_irynafacebook.com/levina.iryna.i

Вопросики?

Лиза @elizaselivanovafacebook.com/

lizaveta.selivanova.9

бабушка сказала, что бы мы присмотрели себе женихов, поэтому обратите внимание на контакты ниже

:) :)