CSS-менеджемент. Пять лет спустя

Вадим Макеев, Opera Software

CSS-менеджемент. Пять лет спустя

CSS

Красота.css

Портянка.css

Модульность

Модульность

БЭМ — как яркий пример модульного подхода

Подключение

Прямо сразу

			<style>
			    BODY { color:whatever; }
			</style>
		

Не рекомендуется, кроме особых случаев

Импорт в голову

			<style>
			    @import url(style.css);
			</style>
		

Не рекомендуется, кроме внутреннего подключения

Прямо в голову

			<head>
			    <link rel="stylesheet" href="style.css">
			</head>
		

Оптимальный вариант для подключения к документу

Без лишнего

			<head>
			    <link rel="stylesheet" href="style.css"
			        type="text/css"
			        media="all"
			        >
			</head>
		

Медиатипы

Подключение

			<link href="style.css" media="all">
			<link href="style.css" media="screen">
			<link href="style.css" media="projection">
			<link href="style.css" media="handheld">
			<link href="style.css" media="print">
		

Подключение, в зависимости от медиатипа

Импорт

			@import url(style.css) all;
			@import url(style.css) screen;
			@import url(style.css) projection;
			@import url(style.css) handheld;
			@import url(style.css) print;
		

Импорт, в зависимости от медиатипа

Не пригодились

Projection в Opera работает хитро для совместимости…

Projection в Opera

			<link href="style.css" media="screen">
		

Стили сработают и в полноэкранном режиме, что равносильно:

			<link href="style.css" media="screen, projection">
		

Сделано для совместимости с другими браузерами

Projection в Opera

			<link href="style.css" media="screen">
			<link href="style.css" media="projection">
		

В этом случае стили разделятся на экранные и полноэкранные

Медиавыражения

Медиавыражения

			<link rel="stylesheet" href="style.css"
			      media="only screen
			             and (min-width:800px)
			             and (min-height:620px)">
		

Подключение стилей в зависимости от особенностей устройства

Медиавыражения

			@media only screen
			       and (min-width:800px)
			       and (min-height:620px) {
			    BODY {
			        color:whatever;
			        }
			    }
		

Адаптация

			<link href="screen.css">
			<link href="screen-narrow.css"
			      media="only screen
			             and (max-width:550px)">
			<link href="screen-wide.css"
			      media="only screen and (min-width:800px)
			             and (min-height:620px)">
		

Адаптация

			<link href="screen.css">
			<link href="screen-narrow.css"
			      media="only screen
			             and (max-width:550px)">
			<link href="screen-wide.css"
			      media="only screen and (min-width:800px)
			             and (min-height:620px)">
		

Фильтрация

Условные комментарии

Множество возможностей: lt lte gt gte & |

			<!--[if IE]>
			    <font>А здесь можно похулиганить…</font>
			<![endif]-->
		

К прискорбию, не будут работать начиная с IE10

Можно и в лоб

			<!--[if IE 6]><link href="ie6.css"><![endif]-->
			<!--[if IE 7]><link href="ie7.css"><![endif]-->
			<!--[if IE 8]><link href="ie8.css"><![endif]-->
		

Отдельный файл стилей для каждой версии IE

Но лучше оптимально

			<!--[if !IE]><!-->
			    <link rel="stylesheet" href="main.css">
			<!--<![endif]-->
			<!--[if IE]>
			    <link rel="stylesheet" href="main-and-ie.css">
			<![endif]-->
		

Плюс фильтры для IE

			* HTML E {
			    color:whatever; IE6
			    }
			* + HTML E {
			    color:nomatter; IE7
			    }
		

Опорные классы

			<!DOCTYPE html>
			<!--[if lt IE 7]><html class="no-js ie6 oldie"> …
			<!--[if IE 7]>   <html class="no-js ie7 oldie"> …
			<!--[if IE 8]>   <html class="no-js ie8 oldie"> …
			<!--[if gt IE 8]><!--><html class="no-js"> …
		

Предложено Полом Айришем, доведено до ума в H5BP

Опорные классы

			.ie6 E {
			    color:whatever; IE6
			    }
			.ie7 E {
			    color:nomatter; IE7
			    }
		

Архитектура

Глобальные правила

Всё то, что потом будет до- и переопределяться

Ластик

			* {
			    margin:0;
			    padding:0;
			    border:0;
			    }
		

Проблемы с производительностью и формами

Normalize.css

			FIELDSET { /* фрагмент */
			    border: 1px solid #C0C0C0;
			    margin: 0 2px;
			    padding: 0.35em 0.625em 0.75em;
			    }
		

Переопределяет, а не отменяет браузерные свойства

Reset.css

			HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME,
			H3, H4, H5, H6, P, BLOCKQUOTE, PRE, A, ABBR, …
			    margin:0;
			    padding:0; /* фрагмент */
			    }
		

Самое разумное решение от Эрика Мейера

Ликбез

Правило Блок объявлений свойство:значение; { } Объявление Селектор

Форма блока

#one { color:whatever; } #two { color:nomatter; }
#one { color:whatever; } #two { color:nomatter; }
#one { color:whatever; } #two { color:nomatter; }

Древовидность

#box #box UL #box UL LI #box UL LI A
#box #box UL #box UL LI #box UL LI A
#fox #fox UL #fox UL LI #fox UL LI A #box #box UL #box UL LI #box UL LI A #fox #fox UL #fox UL LI #fox UL LI A #box #box UL #box UL LI #box UL LI A
#fox #fox UL #fox UL LI #fox UL LI A #box #box UL #box UL LI #box UL LI A #fox #fox UL #fox UL LI #fox UL LI A #box #box UL #box UL LI #box UL LI A
#fox #fox UL #fox UL LI #fox UL LI A #box #box UL #box UL LI #box UL LI A #fox #fox UL #fox UL LI #fox UL LI A #box #box UL #box UL LI #box UL LI A

Всё в порядке

Ж М Е Ы Р Ё А Ъ Ю В З Ь Ц Г Н Я Ф У Т К Ч Й Д Л Ш О И Щ Х С П Э Б
А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я

Как сортировать?

Или включить мозг…

Порядок свойств

  1. Позиционирование
  2. Свойства блока
  3. Размеры блока
  4. Цветовое оформление
  5. Типы содержимого
  6. Текст
  7. Визуальные свойства
  8. Раскладка
  9. Документ
  10. Специальные

Подробнее в снипетах для Zen Coding

CSScomb.ru

Вкусовщина

Почитать и посмотреть

CSS-менеджемент. Пять лет спустя

Вадим Макеев, Opera Software

Презентация: pepelsbey.net/pres/css-management

Powered by Shower