Методологии верстки. Краткий обзор таких методологий, как БЭМ, AMCSS, OOCSS, Atomic CSS, OPOR, MCSS, SMACSS, FUN, DoCSSa. Плюсы и минусы методологий.

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

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

3. ● Масштабируемость
● Количество кода
● Поддержка кода
● Структура кода
Команда:
● Разный стиль кода
● Разные подходы к организации вёрстки
● Множество повторных реализаций
● Трудности рефакторинга
Что же не так?

7. Методологии

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

9. БЭМ
Основная идея:
- типовые проекты должны разрабатываться быстро,
но жить долго
Принципы:
- особое именование классов
- независимость блоков
- повторное использование существующего кода
- масштабируемость команд разработчиков
- точечные изменения с минимальными затратами

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

11. Элемент
часть блока, отвечающая за отдельную функцию, он
может находиться только в составе блока и не имеет
смысла в отрыве от него

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

13. Система именования
Имя блока
формируется как префикс-имя-блока
.b-menu { ... }
.b-text-input { ... }
Имя элемента
создается по схеме: префикс-имя-блока__имя-элемента
.b-menu__item { ... }
.b-text-input__label { ... }
*Элементы элементов не используются
.b-block__elem1__elem2

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

15. БЭМ - инструменты
Для сборки
- bem-tools
- enb-bem
Оптимизаторы
- CSSO
- SVGO
Шаблонизаторы
- BEM-XJSTе
- XJSTе

16. БЭМ
Плюсы:
- достаточно одного класса;
- cпецифичность CSS-правил: проблема и решение;
- прощай каскад?!
- Абсолютно Независимые Блоки (коцепция АНБ)

17. БЭМ
Минусы

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

19. AMCSS
Модули атрибутов для CSS
(Глен Маддерн)
amcss.github.io

20. AMCSS
Основная идея:
- использование кастомных атрибутов
Принципы:
- Modules (блоки)
- Variations (модификаторы)
- Traits (пространства имен)

21. 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>

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

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

24. OCSS
Объектно ориентированный CSS
by Nicole Sullivan

25. OOCSS
Основная идея:
многократность использования написанного кода.
Принципы:
● объект - повторяющиеся стили
● отделение структуры, от оформления;
● отделение контейнеров от содержимого.
.big-parent-class .cool-child-class {
//styles
}
.cool-cahild-class {
//styles
}

26. Оформление
Структура

27. OOCSS
Советы при использовании
● Принцип выбора
(для похожих элементов, например, один вариант стиля
link link link -> link)
● Избегайте прикрепления классов к элементам
(div.cool-class -> .cool-class)
● Используйте сетки
● Использовать принцип одной страницы

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

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

30. Atomic CSS
Основная идея:
- повторное использование стилей
Принципы:
- разделение стилей
- для каждого повторно используемого свойства
должен быть сформирован отдельный класс
- один класс - одно свойство

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

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

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

34. OPOR
Основная идея:
структурирование и систематичность селекторов. Совмещает в себе
лучшие (по мнению автора) черты БЭМа, OOCSS.
Принципы:
Именование классов основных блоков:
Почти как в БЭМе: блоки (.block), элементы (.block__elem),
модификаторы (.block_mod).

35. OPOR
Использование каскада
- Контекст
- Пользовательский контент
Примеси
По принципу OOCSS
Состояния
Префикс “.is-”
.is-expanded, .is-visible, .is-highlighted

36. OPOR
JS-селекторы
Префикс “.js-”
.js-files, .js-select
Обёртки
Не несут никакой семантики, используются для оформления
.header-i
Порядок классов:
блоки, примеси, JS-хуки, состояния:
<div class="upload-files scrollable js-files is-hidden">

37. OPOR
Плюсы:
- Четкие правила именования
- Легкие правила
Минусы:
- Задает только правила именования
- Хорошо подходит только для небольших страниц и проектов

38. MCSS
Многослойная система организации
CSS
by OK.RU

39. MCSS
Основная идея:
распределение стилей по уровням. Многослойная система организации
CSS основана на принципах OOCSS и БЭМ.
Принципы:
- Фундамент
- Слой 1
- Слой 2
- Слой 3
- Контекст

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

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

42. MCSS
Слой 2 - проектный:
- Изолированные модули (компоненты)
- Уникальные названия.
- Каскад только от 2го слоя

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

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

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

46. SMACSS
Масштабируемая и модульная
архитектура для CSS
(Джонатан Снук)
smacss.com

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

48. Разделение стилей на 5 частей
Base rules - Layout rules - Modules rules - State rules - Theme rules
SMACSS структура

49. Base rules
стили основных элементов сайта — body,
input, button, ul, ol и др., reset.css

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

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

52. State rules
стили состояния - прописываются различные
состояния модулей и скелета сайта
(допустимо использование «!important»)

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

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

55. FUN
Плоская иерархия селекторов,
служебные стили, компоненты с
неймспейсами
(Бен Фрейн)
benfrain.com

56. FUN
Основная идея:
- упрощение создания стилей и их поддержки, автор
взял лучшее от БЭМ и SMACSS
Принципы:
- Flat hierarchy of selectors
- Utility styles
- Name-spaced components

57. FUN
F - Flat hierarchy of selectors - плоская иерархия
селекторов
U - Utility styles - служебные классы
N - Name-spaced components - компоненты с
неймспейсами

58. FUN
Плюсы:
- удобно писать
- удобно поддерживать
- мало требований
Минусы:
- для небольших проектов

59. SASS ориентированная методология
by Matthieu Larcher & Fabien Zibi
DoCSSa

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

61. 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

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

64. DoCCSa
Именование
- Внешний вид
БЭМ
- Структура
состояния записываются с помощью патерна "_is_"
.mainMenu_item _is_current.

65. Я руководитель команды необученных коал, как мне
использовать силу DoCSSa?
● Пока ваши коалы учат SASS, они могут продолжать писать старый css
в папке 'specifics'.
● Как только один из них почувствует, что он готов, он может начать
писать компоненты, которые могут использовать все
● Пройдет немного времени и другие коалы тоже захотят писать такие
компоненты
● Сложив все знания будет намного легче писать компоненты и
переделывать старый код в компоненты
● Не забывайте периодически давать своим коалам много свежего
эвкалипта

66. DoCSSa
Плюсы:
- четкие правила
- полная автономность компонентов
- продуманный переход
Минусы:
- необходимо знание препроцессора SASS

67. Инструменты
- Препроцессоры
- Библиотеки готовых компонентов
- Плагины для сред разработки
- Инструменты для проверки синтаксиса
- https://github.com/stubbornella/oocss
- AbsurdJS - for Atomic CSS
- https://github.com/benschwarz/am-grid - for AMCSS
- БЭМ-инструменты

68. Как принять эту веру
План:
1) Плакать, паниковать, страдать, ныть, жаловаться, сокрушаться о
выбранной профессии
2) Успокоится и изучить правила. Донести правила до команды
3) Разрабатывать новые страницы элементы в соответствии с правилами
выбранной методологии
4) Все элементы, которые затрагиваются при внесении изменений,
багфиксинге и т.д. стараться переписывать под выбранную
методологию
5) В свободное время - рефакторить и не забывать тестировать)
6) Спрашивать совета и ревью

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

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

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

72. Спасибо за внимание!
Ирa
@lev_iryna
facebook.com/levina.iryna.i
Вопросики?
Лиза
@elizaselivanova
facebook.com/lizaveta.selivanova.9
бабушка сказала, что бы мы присмотрели себе женихов, поэтому обратите внимание на контакты ниже
:) :)