Вы находитесь на странице: 1из 26

CSS-менеджмент

РИТ-2007

Вадим Макеев

0
CSS-менеджмент
Способы управления и оптимизации
сновные направления

1. Файлы
2. Блоки правил
3. Блок и правила внутри

1
Файлы
Разбиение на части
оэтический принцип

1. Блоки — layout.css
2. Шрифты — fonts.css
3. Цвета — colors.css
4. etc…

2
Файлы
Разбиение на части
Функционально-структурный принцип

1. Макет — layout.css
2. Формы — forms.css
3. Каталог — catalog.css
4. Галерея — gallery.css
5. Кнопки — buttons.css

3
Файлы
Подключение к документу
Способы

1. <style type="text/css">@import "style.css";</style>

2. @import "layout.css";
@import "forms.css";

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

4
Файлы
Разбиение на части
Комбинация способов

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

2. @import "layout.css";
@import "forms.css";
@import "catalog.css";

5
Файлы
Управление хаками
Опасные хаки

1. _height:150px; — Internet Explorer

2. :root — Firefox

3. @media all and {min-width:0px;}


{head~body .inputs {height:18px;}} — Opera 9

6
Файлы
Управление хаками
Conditional Comments

<!--[if IE]>
<link rel="stylesheet"
type="text/css" media="all" href="ie.css" />
<![endif]-->

<!--[if lt IE 7]>
<link rel="stylesheet"
type="text/css" media="all" href="ie6.css" />
<![endif]-->

7
Файлы
Управление хаками
Conditional Comments — Раздача файлов по очереди

<!--[if IE]>ie.css<![endif]-->

<!--[if lt IE 7]>ie6.css<![endif]-->

<!--[if lt IE 6]>ie5.css<![endif]-->

IE7 — один запрос


IE6 — два запроса
IE5 — три запроса

8
Файлы
Управление хаками
Conditional Comments — Фильтрация внутри файла

<!--[if IE]>ie.css<![endif]-->

#box {
width:500px; — IE
}
* HTML #box {
width:400px; — IE5, IE6
w\idth:500px; — IE6
}

9
Блок и правила внутри
Структура файла
Глобальные правила — Ластик

* {
padding:0;
margin:0;
}

10
Блок и правила внутри
Структура файла
Глобальные правила — Размер и гарнитура шрифта

HTML {
font-size:100%;
}
BODY {
font:0.8em Arial, sans-serif;
}

11
Блок и правила внутри
Структура файла
Глобальные правила — Прочие излишки

LI {
list-style:none;
}
IMG {
border:none;
}
FIELDSET {
border:solid 0 transparent;
}

12
Блок и правила внутри
Структура файла
Комментарии

1. /* Box
----------------------------------------- */

2. /* SubBox */

Внимание!
Избегайте кириллицы в комментариях.
Подробности: http://cssing.org.ua/,
публикация «CSS, UTF и Интернет эксплорер».

13
Блок и правила внутри
Структура файла
Древовидность

#box {
background:#000;
}
#box LI {
color:#FFF;
}
#box LI .date {
color:#CCC;
}

14
Блок и правила внутри
Структура файла
Древовидность

#box { #box
background:#000;
}
#box LI { LI
color:#FFF;
}
#box LI .date { .date
color:#CCC;
}

15
Блок и правила внутри
Форма блока
Варианты

1. #box {background: #000; color: #FFF;} — для биороботов


2. #box {
background: #000; — традиционный вариант
color: #FFF;
}
3. #box {
background:#000; — читабельный вариант
color:#FFF;
}

16
Блок и правила внутри
Форма блока
Варианты — Традиционный

#foo {
background: #000;
}
#bar {
background: #000;
}
#lol {
background: #000;
}

17
Блок и правила внутри
Форма блока
Варианты — Традиционный, структурно

18
Блок и правила внутри
Форма блока
Варианты — Читабельный

#foo {
background:#000;
}
#bar {
background:#000;
}
#lol {
background:#000;
}

19
Блок и правила внутри
Форма блока
Варианты — Читабельный, структурно

20
Блок и правила внутри
Форма блока
Варианты — Читабельный vs. традиционный

21
Блок и правила внутри
Порядок следования
Группы свойств

#box {
1. позиционирование — position, z-index
2. плавающая модель — float, clear
3. блочная модель — padding, margin, width
4. визуальные cвойства блока — background, border
5. свойства текста — list-style, text-align
6. свойства шрифта — font
7. цвет шрифта — color
}

22
Блок и правила внутри
Сокращения
Краткая запись свойств

1. Четверные: padding:10px 5px 10px 5px; — TRouBLe?


2. Тройные: padding:10px 5px 3px; — TRy LuBe
3. Двойные: padding:10px 5px; — To Be oRiginaL

Зачастую тройные сокращения немного короче:


#box {
padding-bottom:10px;
padding:0 0 10px; /* Экономия три символа */
}

23
Блок и правила внутри
Запись цветов
Стандартизация

1. Только HEX, для визульной однородности значений


2. Прописные символы, для окончательного выделения

#foo { #bar {
content:'green'; color:#FFFFFF;
color:green; color:#FFF;
color:#bebebe; }
color:#BEBEBE;
}

24
CSS-менеджмент
РИТ-2007

Спасибо!

Вадим Макеев — http://pepelsbey.net

25

Оценить