Проблемы CSS

#common_css{display:none}body{background:#fff;color:#000;margin:0;padding:0;direction:ltr;font-family:tahoma,arial,verdana,sans-serif,Lucida Sans;font-size:11px;font-weight:normal}body.font_medium{font-size:12px;font-family:Lucida Grande,Arial,tahoma,verdana,sans-serif}body.nofixed{width:100%;overflow:hidden}body.nofixed #page_wrap{position:relative;height:100%;width:100%;overflow:auto}.fixed{position:fixed}body.nofixed .fixed,body.mobfixed .fixed{position:absolute}body.firefox #page_wrap{position:relative;width:100%;overflow:hidden}.table td{vertical-align:top;text-align:left}.scroll_fix_wrap{text-align:left;direction:ltr}a{color:#2b587a;text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}img{border:0}form{margin:0;padding:0}small{font-size:10px}.font_medium small{font-size:11px}textarea.ashelper{overflow:hidden}#fmenu{position:absolute;right:0;top:0;margin-top:2px;padding:5px 0;background:#FFF}.fmenu_item,.fmenu_cont{overflow:hidden;display:inline-block;*display:inline;*zoom:1}.fmenu_item{font-size:10px;clear:both;margin:4px 1px;line-height:11px;padding:4px;font-weight:bold;color:#45688e;opacity:.5;filter:alpha(opacity=50);-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:opacity 100ms linear;-moz-transition:opacity 100ms linear;-o-transition...

Дублированный код
Запутанная структура
Сложность поддержки

В команде

#common_css{display:none}body{background:#fff;color:#000;margin:0;padding:0;direction:ltr;font-family:tahoma,arial,verdana,sans-serif,Lucida Sans;font-size:11px;font-weight:normal}body.font_medium{font-size:12px;font-family:Lucida Grande,Arial,tahoma,verdana,sans-serif}body.nofixed{width:100%;overflow:hidden}body.nofixed #page_wrap{position:relative;height:100%;width:100%;overflow:auto}.fixed{position:fixed}body.nofixed .fixed,body.mobfixed .fixed{position:absolute}body.firefox #page_wrap{position:relative;width:100%;overflow:hidden}.table td{vertical-align:top;text-align:left}.scroll_fix_wrap{text-align:left;direction:ltr}a{color:#2b587a;text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}img{border:0}form{margin:0;padding:0}small{font-size:10px}.font_medium small{font-size:11px}textarea.ashelper{overflow:hidden}#fmenu{position:absolute;right:0;top:0;margin-top:2px;padding:5px 0;background:#FFF}.fmenu_item,.fmenu_cont{overflow:hidden;display:inline-block;*display:inline;*zoom:1}.fmenu_item{font-size:10px;clear:both;margin:4px 1px;line-height:11px;padding:4px;font-weight:bold;color:#45688e;opacity:.5;filter:alpha(opacity=50);-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:opacity 100ms linear;-moz-transition:opacity 100ms linear;-o-transition...

Разный стиль кода
Разные подходы к организации вёрстки
Множество повторных реализаций
Трудности рефакторинга

Как с этим бороться?

Нужна система!

Единый стиль - Google style guide, Github s.g.
Ресеты стилей - reset.css, normаlize.css
Фреймворки - Twitter Bootstrap, 960gs
CSS препроцессоры - Less, Sass

Методологии

OOCSS
Yahoo YUI → SMACSS
АНБ → БЭМ
Многослойный CSS

Multilayer CSS на rhr.me/MCSS

Что мы получим?

База стандартов
Быстрая разработка
Логичная структура
Легко воспринимаемый код
Порядок!

Компоновка модулей

По полочкам

Стили каждого модуля хранятся в одном месте, включая каскад:

/* Toolbar
--------------------------------------------------------------------- */

.toolbar {...}
	.toolbar_logo {...}

/* Toolbar dropdown menu
-------------------------------------------------- */

.toolbar_dropdown {...}
	.toolbar_dropdown .u-menu {...}

/* /Toolbar dropdown menu */

/* /Toolbar
--------------------------------------------------------------------- */

Контекст - исключение

Единственное исключение, это классы Контекстного слоя:

/* Toolbar
--------------------------------------------------------------------- */

	...

/* Toolbar dropdown menu
-------------------------------------------------- */

.toolbar_dropdown {...}
	.ie8 .toolbar_dropdown {...}
		.toolbar_dropdown .u-menu {...}

		@media all and (...) {
			.toolbar_dropdown .u-menu {...}
			}

/* /Toolbar dropdown menu */

/* /Toolbar
--------------------------------------------------------------------- */

Именование

Уникальные названия, на основе модуля

Названия классов отделяются "_", а модификаторы "__"

<header class="toolbar">
	<a href="/" class="toolbar_logo">Logo</a>
	<nav class="toolbar_dropdown">
		<ul class="toolbar_dropdown_ul">
			<li class="toolbar_dropdown_li">
			<li class="toolbar_dropdown_li toolbar_dropdown_li__active">

<menu class="umenu">
	<li class="umenu_i">
	<li class="umenu_i umenu_i__active">
	<li class="umenu_i umenu_i__special">

Словарь сокращений

    i - item
	tx - text
	it - input text
	is - input submit
	itx - textarea
	ir - input radio
	ic - input checkbox
	ico - icon
	t - title
	f - footer
	h - header
	с - card
	cl - clear
	col - column
	cnt - content
	img - image
	a - link
	ac  - action
	usr - user
	e - error

Фундамент

Корневые, мало изменяемые стили:

ресеты
стили по умолчанию
общая конструкция

Основные правила:

Малый вес селекторов, располагаются в самом начале CSS

Контекст

.ie8 - браузеры
.touch - особенности девайса
.logged-in - среда
Media queries

Основные правила:

Располагаются рядом с модифицируемыми классами, по всему CSS

1 слой - Базовый

Портальный фреймворк

например:

формы
кнопки
блоки навигации и пр.

Можно использовать Twitter Bootstrap, 960gs, inuit.css

1 слой - Базовый

Основные правила:

Абстрактность названий и модификаторов
Модифицируются каскадом от 2 и 1 слоя
Располагаются вверху css

Преимущества:

Переиспользуемость
Простая поддержка
Быстрая разработка

2 слой - Проектный

Изолированные модули, составные части страницы

например:

форма регистрации
блок логина
корзина товаров

2 слой - Проектный

Основные правила:

Уникальные названия частей модуля
Модифицируются только от 2 слоя
Располагаются между стилями 1 и 3 уровня

Преимущества

Изолированность
Большой доступ к частям модуля

3 слой - Косметический

Простые, мало влияющие стили

например:

цвета ссылок
низкоуровневый OOCSS (.font-size-xl, .margin-t-l)
глобальные модификаторы

3 слой - Косметический

Основные правила:

Независимость от других слоёв (кроме контекста)
OOCSS для блоков вне проектов, не больше 3 классов на блок
Большой вес селекторов, располагаются в самом низу CSS

Преимущества:

Малое влияние на вёрстку страницы
Экономия на кол-ве модулей
Простота работы

Процесс разработки

База стандартов

Разработка нового интерфейса

Набрасываем каркас 1 слой

<form class="form">
	<div class="info-block">Заполните поля</div>
	<input type="text" class="input-text">
	<a href="#">Помощь</a>

Создаём новый проектный модуль 2 слой

<fieldset class="new-p-module">
	<form class="new-p-module_form form">
		<div class="new-p-module_tip info-block">Заполните поля</div>
		<input type="text" class="new-p-module_input-text input-text">
		<a href="#">Помощь</a>

Зачем еще один велосипед?

MCSS vs БЭМ

Есть правила взаимодействия модулей - слои
Адекватный уровень абстрактности
Легко использовать без спец. инструментов

MCSS vs SMACSS

Базовый слой с переиспользуемыми стандартами
Более независимые модули и блоки

Внедрение системы

1. Библиотека снипетов и стандартов
1 слой

2. Новые проекты по системе
2 слой

3. Внутренние семинары
и ревью кода

4. Постепенный рефакторинг
старого кода

Будущее MCSS

Открытая документация rhr.me/MCSS

Примеры использования
Модульное развитие
Интернационализация
Среда для разработки спецификаций вёртски

Вопросы и предложения в раздел Issues.

За лучший веб

Работайте над своими методологиями
Разрабатывайте свои инструменты
Ищите лучшее подходы к решению ваших задач
Делитесь опытом

Будем развивать веб вместе!

Спасибо за внимание!

Ваши вопросы?

rhr.me @operatino r@rhr.me

презентация - rhr.me/pres/mcss

Многослойный CSS

Проблемы CSS

В команде

Как с этим бороться?

Нужна система!

Методологии

Что мы получим?

Компоновка модулей

По полочкам

Контекст - исключение

Именование

Словарь сокращений

Фундамент

Основные правила:

Контекст

Основные правила:

1 слой - Базовый

1 слой - Базовый

Основные правила:

Преимущества:

2 слой - Проектный

2 слой - Проектный

Основные правила:

Преимущества

3 слой - Косметический

3 слой - Косметический

Основные правила:

Преимущества:

Процесс разработки

База стандартов

Разработка нового интерфейса

Набрасываем каркас 1 слой

Создаём новый проектный модуль 2 слой

Зачем еще один велосипед?

MCSS vs БЭМ

MCSS vs SMACSS

Внедрение системы

Будущее MCSS

За лучший веб

Спасибо за внимание!