Upload
elizaveta-selivanova
View
4.895
Download
10
Embed Size (px)
Citation preview
А вы верите в систематизацию?или “Методологии верстки”
С чего все началось
● Масштабируемость● Количество кода● Поддержка кода● Структура кода
Команда:● Разный стиль кода● Разные подходы к организации вёрстки● Множество повторных реализаций● Трудности рефакторинга
Что же не так?
Методологии
БЭМ - методология
Блок-Элемент-Модификатор (методология разработана в Яндексе)
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 link -> link)
● Избегайте прикрепления классов к элементам(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 Слой 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
бабушка сказала, что бы мы присмотрели себе женихов, поэтому обратите внимание на контакты ниже
:) :)