Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
А вы верите в
систематизацию?
или “Методологии верстки”
С чего все началось
● Масштабируемость
● Количество кода
● Поддержка кода
● Структура кода
Команда:
● Разный стиль кода
● Разные подходы к орг...
Методологии
БЭМ - методология
Блок-Элемент-Модификатор
(методология разработана в Яндексе)
ru.bem.info
БЭМ
Основная идея:
- типовые проекты должны разрабатываться быстро,
но жить долго
Принципы:
- особое именование классов
- ...
Блок
часть страницы, являющаяся логически независимой
от остального наполнения
Элемент
часть блока, отвечающая за отдельную функцию, он
может находиться только в составе блока и не имеет
смысла в отрыв...
Модификатор
свойство блока или элемента, отвечающее за его
внешний вид или поведение, описывают состояние
блока или элемен...
Система именования
Имя блока
формируется как префикс-имя-блока
.b-menu { ... }
.b-text-input { ... }
Имя элемента
создаетс...
Система именования
Имя модификатора блока
префикс-имя-блока_имя-модификатора_значение-
модификатора
.b-menu_layout_horiz{ ...
БЭМ - инструменты
Для сборки
- bem-tools
- enb-bem
Оптимизаторы
- CSSO
- SVGO
Шаблонизаторы
- BEM-XJSTе
- XJSTе
БЭМ
Плюсы:
- достаточно одного класса;
- cпецифичность CSS-правил: проблема и решение;
- прощай каскад?!
- Абсолютно Незав...
БЭМ
Минусы
БЭМ
Минусы:
- “длинные” названия классов
- сложность освоения командой
AMCSS
Модули атрибутов для CSS
(Глен Маддерн)
amcss.github.io
AMCSS
Основная идея:
- использование кастомных атрибутов
Принципы:
- Modules (блоки)
- Variations (модификаторы)
- Traits ...
AMCSS (концепция)
Modules - блоки и элементы (БЭМ). Для описания
модулей используются HTML атрибуты.
Variations - модифика...
AMCSS
Используется малоизвестный селектор «~=», который
работает как атрибут класса: выбирает элементы,
значения атрибутов...
AMCSS
Плюсы:
- хорошо читаемый и поддерживаемый кот код
- возможность переопределения классов
- повторное использование су...
OCSS
Объектно ориентированный CSS
by Nicole Sullivan
OOCSS
Основная идея:
многократность использования написанного кода.
Принципы:
● объект - повторяющиеся стили
● отделение с...
Оформление
Структура
OOCSS
Советы при использовании
● Принцип выбора
(для похожих элементов, например, один вариант стиля
link link link -> lin...
OOCSS
Плюсы:
- нет определенных правил
- более быстрые страницы
- легко обслуживаемые таблицы стилей
- низкий порог вхожде...
Atomic CSS
Атомарный CSS
(Тьерри Коблентц)
acss.io
Atomic CSS
Основная идея:
- повторное использование стилей
Принципы:
- разделение стилей
- для каждого повторно используем...
Atomic CSS
- один класс - один стиль
- каскад
- независимые классы
Atomic CSS
Плюсы:
- небольшой объем CSS
- легко вводить изменения
- возможность повторного использования
Минусы:
- семанти...
OPOR
Оne Page Of Rules
by Артём Сапегин
OPOR
Основная идея:
структурирование и систематичность селекторов. Совмещает в себе
лучшие (по мнению автора) черты БЭМа, ...
OPOR
Использование каскада
- Контекст
- Пользовательский контент
Примеси
По принципу OOCSS
Состояния
Префикс “.is-”
.is-ex...
OPOR
JS-селекторы
Префикс “.js-”
.js-files, .js-select
Обёртки
Не несут никакой семантики, используются для оформления
.he...
OPOR
Плюсы:
- Четкие правила именования
- Легкие правила
Минусы:
- Задает только правила именования
- Хорошо подходит толь...
MCSS
Многослойная система организации
CSS
by OK.RU
MCSS
Основная идея:
распределение стилей по уровням. Многослойная система организации
CSS основана на принципах OOCSS и БЭ...
MCSS
Фундамент:
- Корневые малоизменяемые стили
- Располагаются в самом начале
Контекст:
- браузеры, особенности девайса, ...
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 ...
Разделение стилей на 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
стили состояния - прописываются различные
состояния модулей и скелета сайта
(допустимо использование «!importa...
Theme rules
описываются стили оформлений
SMACSS
Плюсы:
- управляемый код
- расширяемый код
- возможность повторного использования
- дополнительные уровни семантики...
FUN
Плоская иерархия селекторов,
служебные стили, компоненты с
неймспейсами
(Бен Фрейн)
benfrain.com
FUN
Основная идея:
- упрощение создания стилей и их поддержки, автор
взял лучшее от БЭМ и SMACSS
Принципы:
- Flat hierarch...
FUN
F - Flat hierarchy of selectors - плоская иерархия
селекторов
U - Utility styles - служебные классы
N - Name-spaced co...
FUN
Плюсы:
- удобно писать
- удобно поддерживать
- мало требований
Минусы:
- для небольших проектов
SASS ориентированная методология
by Matthieu Larcher & Fabien Zibi
DoCSSa
DoCSSa
Основная идея:
Основная идея - разделение внешнего вида и структуры. Методология
основана на использовании препроце...
DoCSSa
Файловая структура
==== INIT // сброс
==== BASE // базовые стили - переменные,
цвета, шрифты
==== COMPONENTS // пер...
DoCCSa
Различный внешний вид для компонентов с
одинаковой структурой
@include tabs('.articleTabs', $defaultSkin: false);
@...
DoCCSa
Именование
- Внешний вид
БЭМ
- Структура
состояния записываются с помощью патерна "_is_"
.mainMenu_item _is_current.
Я руководитель команды необученных коал, как мне
использовать силу DoCSSa?
● Пока ваши коалы учат SASS, они могут продолжа...
DoCSSa
Плюсы:
- четкие правила
- полная автономность компонентов
- продуманный переход
Минусы:
- необходимо знание препроц...
Инструменты
- Препроцессоры
- Библиотеки готовых компонентов
- Плагины для сред разработки
- Инструменты для проверки синт...
Как принять эту веру
План:
1) Плакать, паниковать, страдать, ныть, жаловаться, сокрушаться о
выбранной профессии
2) Успоко...
Выводы
- Это полезно
- Это удобно
- Это заставляет думать
- Можно придумать что-то свое
- Можно помогать другим
Спросить очень просто
Спросить очень просто
Спасибо за внимание!
Ирa
@lev_iryna
facebook.com/levina.iryna.i
Вопросики?
Лиза
@elizaselivanova
facebook.com/lizaveta.sel...
Методологии верстки
Методологии верстки
Методологии верстки
Методологии верстки
Próxima SlideShare
Cargando en…5
×

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

22.079 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

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

  1. 1. А вы верите в систематизацию? или “Методологии верстки”
  2. 2. С чего все началось
  3. 3. ● Масштабируемость ● Количество кода ● Поддержка кода ● Структура кода Команда: ● Разный стиль кода ● Разные подходы к организации вёрстки ● Множество повторных реализаций ● Трудности рефакторинга Что же не так?
  4. 4. Методологии
  5. 5. БЭМ - методология Блок-Элемент-Модификатор (методология разработана в Яндексе) ru.bem.info
  6. 6. БЭМ Основная идея: - типовые проекты должны разрабатываться быстро, но жить долго Принципы: - особое именование классов - независимость блоков - повторное использование существующего кода - масштабируемость команд разработчиков - точечные изменения с минимальными затратами
  7. 7. Блок часть страницы, являющаяся логически независимой от остального наполнения
  8. 8. Элемент часть блока, отвечающая за отдельную функцию, он может находиться только в составе блока и не имеет смысла в отрыве от него
  9. 9. Модификатор свойство блока или элемента, отвечающее за его внешний вид или поведение, описывают состояние блока или элемента
  10. 10. Система именования Имя блока формируется как префикс-имя-блока .b-menu { ... } .b-text-input { ... } Имя элемента создается по схеме: префикс-имя-блока__имя-элемента .b-menu__item { ... } .b-text-input__label { ... } *Элементы элементов не используются .b-block__elem1__elem2
  11. 11. Система именования Имя модификатора блока префикс-имя-блока_имя-модификатора_значение- модификатора .b-menu_layout_horiz{ ... } .b-text-input_disabled{ ... } Имя модификатора элемента префикс-имя-блока__имя-элемента_имя- модификатора_значение-модификатора .b-menu__item_state_current{ ... } .b-text-input__label_active{ ... }
  12. 12. БЭМ - инструменты Для сборки - bem-tools - enb-bem Оптимизаторы - CSSO - SVGO Шаблонизаторы - BEM-XJSTе - XJSTе
  13. 13. БЭМ Плюсы: - достаточно одного класса; - cпецифичность CSS-правил: проблема и решение; - прощай каскад?! - Абсолютно Независимые Блоки (коцепция АНБ)
  14. 14. БЭМ Минусы
  15. 15. БЭМ Минусы: - “длинные” названия классов - сложность освоения командой
  16. 16. AMCSS Модули атрибутов для CSS (Глен Маддерн) amcss.github.io
  17. 17. AMCSS Основная идея: - использование кастомных атрибутов Принципы: - Modules (блоки) - Variations (модификаторы) - Traits (пространства имен)
  18. 18. 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>
  19. 19. AMCSS Используется малоизвестный селектор «~=», который работает как атрибут класса: выбирает элементы, значения атрибутов которых содержат указанные слова, разделенные пробелами Группировка значений по атрибутам
  20. 20. AMCSS Плюсы: - хорошо читаемый и поддерживаемый кот код - возможность переопределения классов - повторное использование существующего кода Минусы: - специфичность использования кастомных атрибутов
  21. 21. OCSS Объектно ориентированный CSS by Nicole Sullivan
  22. 22. OOCSS Основная идея: многократность использования написанного кода. Принципы: ● объект - повторяющиеся стили ● отделение структуры, от оформления; ● отделение контейнеров от содержимого. .big-parent-class .cool-child-class { //styles } .cool-cahild-class { //styles }
  23. 23. Оформление Структура
  24. 24. OOCSS Советы при использовании ● Принцип выбора (для похожих элементов, например, один вариант стиля link link link -> link) ● Избегайте прикрепления классов к элементам (div.cool-class -> .cool-class) ● Используйте сетки ● Использовать принцип одной страницы
  25. 25. OOCSS Плюсы: - нет определенных правил - более быстрые страницы - легко обслуживаемые таблицы стилей - низкий порог вхождения Минусы: - нет определенных правил - html обрастает классами - отслеживание существующих модулей
  26. 26. Atomic CSS Атомарный CSS (Тьерри Коблентц) acss.io
  27. 27. Atomic CSS Основная идея: - повторное использование стилей Принципы: - разделение стилей - для каждого повторно используемого свойства должен быть сформирован отдельный класс - один класс - одно свойство
  28. 28. Atomic CSS - один класс - один стиль - каскад - независимые классы
  29. 29. Atomic CSS Плюсы: - небольшой объем CSS - легко вводить изменения - возможность повторного использования Минусы: - семантика, настройки отображения элементов переносятся непосредственно в HTML
  30. 30. OPOR Оne Page Of Rules by Артём Сапегин
  31. 31. OPOR Основная идея: структурирование и систематичность селекторов. Совмещает в себе лучшие (по мнению автора) черты БЭМа, OOCSS. Принципы: Именование классов основных блоков: Почти как в БЭМе: блоки (.block), элементы (.block__elem), модификаторы (.block_mod).
  32. 32. OPOR Использование каскада - Контекст - Пользовательский контент Примеси По принципу OOCSS Состояния Префикс “.is-” .is-expanded, .is-visible, .is-highlighted
  33. 33. OPOR JS-селекторы Префикс “.js-” .js-files, .js-select Обёртки Не несут никакой семантики, используются для оформления .header-i Порядок классов: блоки, примеси, JS-хуки, состояния: <div class="upload-files scrollable js-files is-hidden">
  34. 34. OPOR Плюсы: - Четкие правила именования - Легкие правила Минусы: - Задает только правила именования - Хорошо подходит только для небольших страниц и проектов
  35. 35. MCSS Многослойная система организации CSS by OK.RU
  36. 36. MCSS Основная идея: распределение стилей по уровням. Многослойная система организации CSS основана на принципах OOCSS и БЭМ. Принципы: - Фундамент - Слой 1 - Слой 2 - Слой 3 - Контекст
  37. 37. MCSS Фундамент: - Корневые малоизменяемые стили - Располагаются в самом начале Контекст: - браузеры, особенности девайса, среда, Media queries - располагаются рядом с модифицируемым(изменяемым) классом по всему файлу
  38. 38. MCSS Слой 1 - базовый: - Абстрактные названия. - Самые переиспользуемые элементы - Каскад от 2 и 1 слоя
  39. 39. MCSS Слой 2 - проектный: - Изолированные модули (компоненты) - Уникальные названия. - Каскад только от 2го слоя
  40. 40. MCSS Слой 3 - косметический: - простые, маловлияющие стили - по принципу OOCSS
  41. 41. MCSS Слой 3 - косметический: - простые, маловлияющие стили - по принципу OOCSS
  42. 42. MCSS Плюсы - хорошо изолированные модули - строго определенная логика Минусы - немного непривычное расположение классов - сложная логика распределения по слоям и правил взаимодействия между слоями
  43. 43. SMACSS Масштабируемая и модульная архитектура для CSS (Джонатан Снук) smacss.com
  44. 44. SMACSS Основная идея: - разделение стилей на 5 составляющих Принципы: - Base rules - Layout rules - Modules rules - State rules - Theme rules
  45. 45. Разделение стилей на 5 частей Base rules - Layout rules - Modules rules - State rules - Theme rules SMACSS структура
  46. 46. Base rules стили основных элементов сайта — body, input, button, ul, ol и др., reset.css
  47. 47. Layout rules стили макета - здесь находятся стили глобальных элементов - шапки, футера, сайдбара и т.п
  48. 48. Modules rules стили модулей - блоков, которые могут использоваться несколько раз на одной странице
  49. 49. State rules стили состояния - прописываются различные состояния модулей и скелета сайта (допустимо использование «!important»)
  50. 50. Theme rules описываются стили оформлений
  51. 51. SMACSS Плюсы: - управляемый код - расширяемый код - возможность повторного использования - дополнительные уровни семантики Минусы: - непривычно использовать - надо думать и следовать правилам :)
  52. 52. FUN Плоская иерархия селекторов, служебные стили, компоненты с неймспейсами (Бен Фрейн) benfrain.com
  53. 53. FUN Основная идея: - упрощение создания стилей и их поддержки, автор взял лучшее от БЭМ и SMACSS Принципы: - Flat hierarchy of selectors - Utility styles - Name-spaced components
  54. 54. FUN F - Flat hierarchy of selectors - плоская иерархия селекторов U - Utility styles - служебные классы N - Name-spaced components - компоненты с неймспейсами
  55. 55. FUN Плюсы: - удобно писать - удобно поддерживать - мало требований Минусы: - для небольших проектов
  56. 56. SASS ориентированная методология by Matthieu Larcher & Fabien Zibi DoCSSa
  57. 57. DoCSSa Основная идея: Основная идея - разделение внешнего вида и структуры. Методология основана на использовании препроцессора SASS Принципы: Элементы страницы рассматриваются как компоненты. Описание компонентов состоит из двух частей (из двух mixins) - внешний вид и структура.
  58. 58. 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
  59. 59. DoCCSa Различный внешний вид для компонентов с одинаковой структурой @include tabs('.articleTabs', $defaultSkin: false); @include tabs-skin-alternate('.articleTabs'); в описании структуры компонента проверяем: @if $defaultSkin != false { @include tabs-skin-default($selector); }
  60. 60. DoCCSa Именование - Внешний вид БЭМ - Структура состояния записываются с помощью патерна "_is_" .mainMenu_item _is_current.
  61. 61. Я руководитель команды необученных коал, как мне использовать силу DoCSSa? ● Пока ваши коалы учат SASS, они могут продолжать писать старый css в папке 'specifics'. ● Как только один из них почувствует, что он готов, он может начать писать компоненты, которые могут использовать все ● Пройдет немного времени и другие коалы тоже захотят писать такие компоненты ● Сложив все знания будет намного легче писать компоненты и переделывать старый код в компоненты ● Не забывайте периодически давать своим коалам много свежего эвкалипта
  62. 62. DoCSSa Плюсы: - четкие правила - полная автономность компонентов - продуманный переход Минусы: - необходимо знание препроцессора SASS
  63. 63. Инструменты - Препроцессоры - Библиотеки готовых компонентов - Плагины для сред разработки - Инструменты для проверки синтаксиса - https://github.com/stubbornella/oocss - AbsurdJS - for Atomic CSS - https://github.com/benschwarz/am-grid - for AMCSS - БЭМ-инструменты
  64. 64. Как принять эту веру План: 1) Плакать, паниковать, страдать, ныть, жаловаться, сокрушаться о выбранной профессии 2) Успокоится и изучить правила. Донести правила до команды 3) Разрабатывать новые страницы элементы в соответствии с правилами выбранной методологии 4) Все элементы, которые затрагиваются при внесении изменений, багфиксинге и т.д. стараться переписывать под выбранную методологию 5) В свободное время - рефакторить и не забывать тестировать) 6) Спрашивать совета и ревью
  65. 65. Выводы - Это полезно - Это удобно - Это заставляет думать - Можно придумать что-то свое - Можно помогать другим
  66. 66. Спросить очень просто
  67. 67. Спросить очень просто
  68. 68. Спасибо за внимание! Ирa @lev_iryna facebook.com/levina.iryna.i Вопросики? Лиза @elizaselivanova facebook.com/lizaveta.selivanova.9 бабушка сказала, что бы мы присмотрели себе женихов, поэтому обратите внимание на контакты ниже :) :)

×