CSS-менеджемент. Три года спустя

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

CSS-менеджемент. Три года спустя

Модульность

fonts.css — шрифты *
colors.css — цвета *
forms.css — функциональность
catalog.css — структура
paging.css — компонент

* Не рекомендуются.

Подключение

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

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

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

Хитромудрый импорт

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

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

Прямое подключение

					<head>
					    <link rel="stylesheet" href="style.css">
					</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;

Импорт файлов, в зависимости от медиа-типа.

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

					@media  handheld,
					        screen and ( max-width:480px ),
					        screen and ( max-device-width:480px ) {
					    BODY {
					        font-size:1.3em;
					        }
					}

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

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

Супер-возможности

					<!--[if lt IE 7]><![endif]-->
					<!--[if gte IE 6]><![endif]-->
					<!--[if lte IE 8]><![endif]-->

…вплоть до безумия:

					( gte IE 5.5 ) & ( lt IE 7 ) | ( gt IE 9 )

Подключение в лоб

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

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

Хитрая комбинация

Только не IE

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

Файлы стилей без хаков для всех, кроме IE.

Только не IE

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

Не забываем закрыть комментарии.

Только IE

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

Сшитые файлы стилей и хаки, только для IE.

Фильтрация внутри файла

Box Model Hack

					#box { 
					    width:400px; 
					    voice-family: "\"}\""; 
					    voice-family:inherit;
					    width:300px;
					    }

Актуальные фильтры

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

Архитектура файла

Скелет комментариев

					/* Element
					---------------------------------------- */
					#one {
					    color:whatever;
					    }

Скелет комментариев

					/* Sub Element */
					#two {
					    color:nomatter;
					    }

Скелет комментариев

					/* Element
					---------------------------------------- */
					/* Sub Elements */
					 
					/* Element
					---------------------------------------- */
					/* Sub Elements */

Специальные блоки

					@import url( style.css )
					@media print { BODY { font-size:12pt } }
					@font-face { font-family:'Comic Sans' }
					@page { margin-top:3cm }

Глобальные умолчания

Базовые вещи

					BODY {
					    background:#FFF;
					    color:#000;
					    }
					IMG {
					    border:none;
					    }

Ластик

					* {
					    padding:0;
					    margin:0;
					    }

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

Reset.css

					HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME,
					H3, H4, H5, H6, P, BLOCKQUOTE, PRE, A, ABBR,
					ADDRESS, BIG, CITE, CODE, DEL, DFN, EM, FONT,
					LABEL, LEGEND, TABLE, CAPTION, TBODY, … {
					    margin:0;
					    padding:0;
					    }

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

Типичный код

					#box {
					    color:whatever;
					    }
					#box A {
					    color:nomatter;
					    }

Удобный код

					#box {
					    color:whatever;
					    }
					    #box A {
					        color:nomatter;
					        }

Форма блока

Типичный блок

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

Удобный блок

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

Всё в порядке

Сортировка свойств

Позиционирование
Поведение и свойства блока
Размерность блока
Цветовое оформление

Подробный список свойств на странице проекта Zen Coding.

Сортировка свойств

Специальные типы содержимого
Текст
Визуальные свойства
Печать

Подробный список свойств на странице проекта Zen Coding.

Пример кода

					#box {
					    position:absolute;
					    top:10px;
					    background:#FFF;
					    color:#000;
					    font-size:10px;
					    }

Попробовать прямо сейчас

CSScomb.ru

CSS-менеджемент. Три года спустя

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