Методологии верстки
Download as pptx, pdf4 likes25,216 views
Документ представляет обзор различных методологий стилизации CSS, таких как BEM, OOCSS, AMCSS и SMACSS, описывая их принципы, преимущества и недостатки. Основная идея каждой методологии состоит в систематизации и оптимизации работы с кодом для повышения его масштабируемости и удобства поддержки. Также предлагаются инструменты и рекомендации по внедрению этих методологий в команду разработчиков.
Методологии верстки
- 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 }
- 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 Плюсы: - Четкие правила именования - Легкие правила Минусы: - Задает только правила именования - Хорошо подходит только для небольших страниц и проектов
- 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. Выводы - Это полезно - Это удобно - Это заставляет думать - Можно придумать что-то свое - Можно помогать другим
- 72. Спасибо за внимание! Ирa @lev_iryna facebook.com/levina.iryna.i Вопросики? Лиза @elizaselivanova facebook.com/lizaveta.selivanova.9 бабушка сказала, что бы мы присмотрели себе женихов, поэтому обратите внимание на контакты ниже :) :)