А вы верите в систематизацию?

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

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

Что же не так?

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

​

Команда:

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

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

Блок-Элемент-Модификатор

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

​

​

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

Объектно ориентированный CSS

by Nicole Sullivan

​

OOCSS

Основная идея:

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

​

Принципы:

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

​

​

.big-parent-class .cool-child-class {

//styles

}

.cool-cahild-class {

//styles

}

Оформление

Структура

OOCSS

Советы при использовании

​

• Принцип выбора

​

​

• Избегайте прикрепления классов к элементам

​

​

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

​

div.cool-class .cool-class

link link link link

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

​

OPOR

JS-селекторы

Префикс “.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

Плюсы

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

​

Минусы

• немного непривычное расположение классов
• сложная логика распределения по слоям и правил взаимодействия между слоями

SMACSS

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

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

​

smacss.com

​

SMACSS

Основная идея:

• разделение стилей на 5 составляющих

Принципы:

• Base rules
• Layout rules
• Modules rules
• State rules
• Theme rules

​

​

​

SMACSS структура

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

​

​

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

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

​

​

FUN

F - 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_iryna

facebook.com/levina.iryna.i

​

​

​

Лиза

@elizaselivanova

facebook.com/lizaveta.selivanova.9

​

​

:)

:)

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