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

CSS

Красота.css

Портянка.css

Модульность

Цвета, шрифты: fonts.css, colors.css
Функциональность: catalog.css, gallery.css
Структура сайта: forms.css, content.css
Компоненты: paging.css button.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;

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

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

all — по умолчанию
screen — для всех устройств с экраном
projection — только для Opera в полноэкранном режиме
handheld — никто не использует
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
			    }

Архитектура

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

Импорт шрифтов и внешних CSS-файлов
Сброс умолчаний браузера, чтобы два раза не бегать
Базовые правила для документа, ссылок

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

Ластик

			* {
			    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; /* фрагмент */
			    }

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