Post on 09-Apr-2017
А вы верите в систематизацию?
или “Методологии верстки”
С чего все началось
● Масштабируемость● Количество кода● Поддержка кода● Структура кода
Команда:● Разный стиль кода● Разные подходы к организации вёрстки● Множество повторных реализаций● Трудности рефакторинга
Что же не так?
Методологии
БЭМ - методологияБлок-Элемент-Модификатор
(методология разработана в Яндексе)
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Основная идея: - использование кастомных атрибутов
Принципы:- 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Плюсы:- хорошо читаемый и поддерживаемый кот код - возможность переопределения классов- повторное использование существующего
кода
Минусы:- специфичность использования кастомных
атрибутов
OOCSSОсновная идея: многократность использования написанного кода.Принципы:● объект - повторяющиеся стили● отделение структуры, от оформления;● отделение контейнеров от содержимого.
.big-parent-class .cool-child-class {//styles}
.cool-cahild-class {//styles}
Оформление
Структура
OOCSSСоветы при использовании● Принцип выбора
● Избегайте прикрепления классов к элементам
● Используйте сетки● Использовать принцип одной страницы
link link linklink
div.cool-class.cool-class
OOCSSПлюсы:- нет определенных правил - более быстрые страницы- легко обслуживаемые таблицы стилей- низкий порог вхожденияМинусы:- нет определенных правил- html обрастает классами- отслеживание существующих модулей
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Плюсы- хорошо изолированные модули- строго определенная логика
Минусы- немного непривычное расположение классов - сложная логика распределения по слоям и правил
взаимодействия между слоями
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
бабушка сказала, что бы мы присмотрели себе женихов, поэтому обратите внимание на контакты ниже
:) :)