Главная » Статьи » Web-кодинг » CSS

70 идей экспертов для улучшения CSS кода
Smashing Magazine



Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки.

Мы обратили свой взгляд на наиболее интересные и полезные техники CSS кодинга и перечислили их в этой статье. Также мы включили некоторые базовые техники, используемые многими в каждом проекте, но которые трудно найти, когда они нужны.

Это обзор 70 техник предложенных экспертами CSS, вы должны быть готовы пройти по списку ссылок и похожих публикаций в конце статьи.

Мы хотим сказать спасибо всем разработчикам, которые делятся своими идеями, техниками, методами, знаниями и опытом с их читателями.


1.1 Кодинг: Начинаем

Когда дизайн готов, начните с пустой страницы. Добавьте заголовки, навигацию, пример содержимого, и футер, потом добавьте html разметку и только после этого CSS. [CSSing]

Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и поля всех элементов в самом начале файла стилей.

Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию. [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]

master.css

Code
@import
url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");
<style type="text/css" media="Screen">
/*\*/ @import url("css/master.css"); /* Fix IE. Hide from IE Mac */
</style>

Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (<p class="floatLeft alignLeft width75">...</p>) [Richard K. Miller]

Code
.width100 { width: 100%;
}
.width75 {width: 75%;}
.width50 {width: 50%;}
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}

1.2 Организация CSS

Используйте главный файл стилей. Организация CSS упрощает поддержку сайта. Начните с главного файла стилей в нем импортируйте reset.css, global.css, flash.css (если нужен) и structure.css и возможно файл настроек типографики.

Code
h2 { }
#snapshot_box h2 {
padding: 0 0 6px 0;
font: bold 14px/14px "Verdana", sans-serif;
}
#main_side h2 {
color: #444;
font: bold 14px/14px "Verdana", sans-serif;
}
.sidetagselection h2 {
color: #fff;
font: bold 14px/14px "Verdana", sans-serif;
}

Используйте флаги. Разделяйте файл CSS на секции, например, Global Styles – (параграфы, списки и т.д.), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]

Code
/*
-----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

Создавайте таблицу содержимого. В начале файла CSS, создайте таблицу содержимого. Стоит выделить различные разделы (header, main, footer etc), разделитель разделов должен быть хорошо заметным. [5 Steps to CSS Heaven]

Упорядочивайте свойства в алфавитном порядке. Не знаю, кто подал мне эту идею, но я упорядочиваю свойства в алфавитном порядке, это упрощает их поиск. [Christian Montoya]

Code
body
{
background:#fdfdfd;
color:#333;
font-size:1em;
line-height:1.4;
margin:0;
padding:0;
}

Разделяйте код на блоки. Для многих это очевидно, но иногда я все же встречаю CSS не разделенные на блоки. Эта не сложная операция значительно упрощает работу с кодом недели, месяцы и годы спустя. Примеры: "/* Structure */, /* Typography */ etc." [CSS Tips and Tricks]

Используйте хуки. Несмотря на то, что вы разделяете CSS на блоки, не помешает и использование структурированных хуков. [CSS Tips and Tricks]

Разделяйте файл CSS на блоки. Я разделяю код на три разных блока, в первом определения для отдельных элементов, тела документа, ссылок, заголовков, сброс параметров по умолчанию, после этого идет блок с определениями для классов, третьим идет блок, в котором определены стили для основных контейнеров, я создаю определения для контейнеров, даже если они не содержат никаких правил. [Jonathan Snook]


1.3 Кодинг: Работа с идентификаторами, классами, селекторами и свойствами

Сводите число контейнеров к минимуму. Предохраняйте структуру документа от разрастания. Новички часто используют много div`ов как будто это ячейки таблицы, не повторяйте эту ошибку, используйте и другие элементы для создания разметки. Обдумайте все возможности прежде чем добавлять новый div, часто можно избежать этой необходимости используя некоторые свойства CSS. [Ryan Parr]

Сводите к минимуму число свойств. Работайте умнее, а не тяжелее с CSS. Это правило включает несколько подправил: если не уверенны нужно ли добавлять свойство не добавляйте его, если не уверены, зачем добавляете свойство не добавляйте его, если видите, что свойство используется в разных местах, подумайте нельзя ли его добавить только один раз. [CSSing]

Сводите к минимуму число селекторов. Исключите необязательные селекторы. Чем меньше используется селекторов, тем меньше селекторов необходимо для переназначения стилей и тем проще исправить проблемы. [Jonathan Snook]

Сведите к минимуму количество хаков. Используйте только хорошо известные и документированные ошибки в браузерах. Часто мне приходится видеть хаки там, где они не нужны, поэтому прежде чем использовать хак исследуйте свою проблему (в этом вам может помочь Google). [10 Quick Tips for an easier CSS life]

Используйте константы для ускорения разработки. Константы это фиксированные значения, которые можно использовать в коде. Один из способов обойти отсутствие констант в CSS, использовать комментарии в начале файла, чтобы определить «константы». Очень удобно определять, таким образом, цвета и быстро заменять их значения по всему документу с помощью «поиска и замены». [Rachel Andrew]

Code
# /*
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */

Используйте систему имен. Использование системы для имен идентификаторов и классов может сохранить много времени при исправлении багов, и обновлении документов. В больших CSS документах можно быстро запутаться, если имена абсолютно разные и не придерживаются системы правил. Я рекомендую использовать паттерн parent_child. [10 CSS Tips]

Давайте классам и идентификаторам семантические имена. Необходимо исключить имена, отражающие оформление. Если назвать элемент «right-col», всегда есть вероятность что после изменения CSS «right-col» будет отображаться с левой стороны страницы, в таком случае недоразумения неизбежны, лучше исключить имена отражающие оформление. [Garrett Dimon]

Группируйте селекторы с общими атрибутами. Если несколько элементов, классов или идентификаторов используют одно и то же свойство, можно сгруппировать селекторы чтобы не указывать это свойство несколько раз. [Roger Johansson]

Изолируйте свойства, которые собираетесь использовать несколько раз. Если необходимо часто использовать одно и то же свойство, изолируйте его чтобы не повторять каждый раз, к тому же это даст возможность изменять оформление всех элементов сайта использующих его. [5 Steps to CSS Heaven]

Используйте идентификаторы и классы как можно выше в иерархии документа. По возможности, используйте комбинированные селекторы, не бойтесь использовать длинные селекторы. Длинные селекторы могут сделать CSS более понятным и уменьшают шансы class- или div- мании. [Chric Casciano]

Учитесь использовать каскадную природу CSS. Представьте, что у вас есть два похожих элемента с минимальными отличиями - вы можете создать CSS для каждого из них, или создать один CSS для обоих, а потом использовать дополнительные свойства, чтобы один из них выглядел иначе. [5 Steps to CSS heaven]

Используйте теги <small>, <em> и <strong>. Иногда нужно выделить часть текста, в таком случае не стоит использовать div или классы, используйте семантические теги. [Mike Rundle’s 5 CSS Tips]


1.4 Кодинг: Используйте сокращения

Краткие шестнадцатеричные представления цвета. В шестнадцатеричных представлениях цветов, которые состоят из трех пар одинаковых цифр, можно пропустить каждую вторую цифру, #000 то же самое что и #000000, #369 то же самое что и #336699. [Roger Johansson]

Определяйте псевдо классы для ссылок в порядке LoVe/HAte:Link, Visited, Hover, Active. Чтобы упорядочить определения псевдо классов для ссылок размещайте их в порядке «link-visited-hover-active», или если короче «LVHA». Псевдо класс «focus», может быть помещен в конце этого списка, но прочитайте это объяснение, прежде чем использовать его. [Eric Meyer]

Code
a:link {color:
blue;}
a:visited {color: purple;}
a:hover {color: purple;}
a:active {color: red;}

Определяйте margin, padding или border в порядке TRouBLed:Top, Right, Bottom, Left. При использовании стенографических свойств margin, padding или border, располагайте значения по часовой стрелке, начиная сверху: Top, Right, Bottom, Left. [Roger Johansson]

Используйте стенографические свойства. Используйте стенографические свойства margin, padding, font, border и другие.

Code
margin: top right bottom
left;
margin:1em 0 2em 0.5em;
(margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0.5em;)
Code
border:width style
color;
border:1px solid #000;
Code
background: color image repeat
attachment position;
background:#f00 url(background.gif) no-repeat fixed 0 0;
Code
font: font-style (italic/normal)
font-variant (small-caps)
font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5 Кодинг: Типографика

Чтобы работать с em как с px, установите font-size для тега body 62.5%. Размер шрифта по умолчанию 16px используя это правило, мы задаем величину em равную примерно 10px (16 x 62.5% = 10). Это позволяет легко задавать в em размеры соответствующие пиксельным величинам, к примеру 1.3em примерно равно 13px. [Jonathan Snook]

Используйте универсальную кодировку символов. Хотелось бы использовать одну универсальную кодировку символов подходящую для большинства случаев. К счастью она существует, это UTF-8, которая основана на Unicode. Установить кодировку страницы можно с помощью следующего кода. [20 pro tips]

Code
<meta
http-equiv="content-type" content="text/html;charset=utf-8"
/>

Управляйте регистром с помощью CSS. Если нужно чтобы текст был написан заглавными буквами, вместо того чтобы переписывать его позвольте сделать эту работу CSS. Следующий код трансформирует все заголовки в верхний регистр. [20 pro tips]

Code
h1 {text-transform:uppercase;}

Используйте малые прописные с помощью CSS. Свойство font-variant используется для вывода текста малыми прописными, это значит что все буквы в нижнем регистре будут преобразованы в заглавные, но с меньшим размером шрифта

Code
h1
{font-variant:small-caps;}

Предусматривайте все возможности — указывайте тип шрифта. Когда указан конкретный шрифт, который должен использоваться в дизайне, это делается в надежде на то, что этот шрифт установлен у пользователя, но нужно предусмотреть и случай когда необходимого шрифта нет, для этого можно определить альтернативные шрифты, как показано ниже, очень важно закончить список типом необходимого шрифта. [Getting into good coding habits]

Code
p
{font-family:Arial,Verdana,Helvetica,sans-serif;}

Используйте 1.4em - 1.6em для высоты строки. Чтобы сделать текст читабельным используйте line-height:1.4em, длину строк около 10 слов, и достаточно контрастные цвета. Чисто черный на белом фоне слишком контрастен для ярких CRT дисплеев, я стараюсь использовать чуть затемненный белый #fafafa и темно серый #333333. [Christian Montoya]

Устанавливайте размер шрифта 100.01% для элемента html. Значение 100.01% для размера шрифта компенсирует несколько багов в различных браузерах. Во-первых, установка размера шрифта в процентах (вместо em) исключает проблему в IE/Win с непропорциональным ростом или уменьшением размера шрифта, если он будет установлен в em для других элементов. Во-вторых, некоторые версии Opera могут отображать 100% шрифт слишком мелко по сравнению с другими браузерами. С другой стороны у Safari проблемы с размером шрифта 101%. Сейчас лучшее решение это использовать значение 100.01% для этого свойства. [CSS: Getting into good habits]


1.6 Кодинг: Отладка

Добавляйте border чтобы увидеть контейнеры. Используйте тестовые стили, такие как границы или цвет фона при отладке документа. Хорошо работает div {border:1px red dashed;}, можно использовать и * {border: 1px solid #ff0000;}. Обратите внимание на инструменты которые могут помочь при отладке страницы. [Chric Casciano] Использование границ для отдельных элементов может помочь обнаружить их перекрытие, или лишние отступы которые не всегда легко увидеть. [CSS Crib Sheet]

Code
* {border:1px solid
#f00;}

При отладке в первую очередь проверяйте, все ли элементы закрыты. Если после незначительных изменений в коде ваша прекрасная разметка сломалась, причиной тому может быть незакрытый элемент. [10 CSS Tips]


2.1 Технические хитрости: Идентификаторы, Классы

1 ID, много классов. Идентификаторы, идентификаторы элементов должны быть уникальны в пределах страницы, напротив множество элементов могут использовать одно и то же имя класса. Имена классов и идентификаторов могут содержать символы A-Z, a-z, 0-9 и дефис (-), не могут начинаться с дефиса или цифры (смотрите спецификацию CSS2) [Roger Johansson]

Имена элементов, используемые в селекторах, чувствительны к регистру. При использовании CSS с документом XHTML, имена элементов в селекторах чувствительны к регистру, чтобы избежать неприятностей я рекомендую использовать нижний регистр для имен элементов в CSS селекторах. Имена классов и идентификаторов чувствительны к регистру и в HTML и в XHTML, поэтому избегайте смешивания регистров в селекторах. [Roger Johansson]

Классы и идентификаторы должны быть правильными. Имена классов и идентификаторов должны начинаться с буквы, идентификаторы должны быть уникальными, их имена должны отражать функциональность элемента, а не его оформление. [CSS Best Practices]

Можно использовать несколько классов для одного элемента. Это позволяет написать несколько правил, определяющих различные свойства, и применять их по необходимости. [Roger Johansson]


2.2 Технические хитрости: Используйте все возможности селекторов

Roger Johansson опубликовал чрезвычайно полезную серию статей о селекторах в CSS 2.1, некоторые полезные моменты перечислены ниже.

Селекторы дочерних элементов. Селектор дочернего элемента указывает на элемент, который является непосредственным потомком другого элемента, данный селектор состоит из двух или более селекторов элементов разделенных знаком «>», родительский элемент располагается слева от этого знака. Следующее правило действительно для всех элементов strong являющихся непосредственными потомками div. [Roger Johansson]

Code
div > strong
{color:#f00;}

Селекторы соседних элементов. Селектор соседних элементов состоит из двух простых селекторов и символа «+» между ними. Данный селектор указывает на элемент, следующий за первым. Элементы должны имеет один и тот же родительский элемент и первый элемент должен располагаться непосредственно перед вторым. [Roger Johansson]

Code
p + p
{color:#f00;}

Селекторы атрибутов. Эти селекторы можно использовать для сопоставления правил к элементам на основании наличия или значения атрибутов. Есть четыре способа использования селекторов атрибутов.

[att]
Элементы для которых установлен атрибут att, независимо от значения этого атрибута.

[att=val]
Элементы значение атрибута att которых в точности равно val.

[att~=val]
Элементы атрибут att которых содержит список значений разделенных пробелами, одно из которых равно val. В этом случае val не может содержать пробелов.

[att|=val]
Если значением атрибута att элемента является список разделенных дефисом слов, начинающийся со слова "val". Сопоставление всегда начинается с начала значения атрибута. В первую очередь это необходимо для сопоставления отдельным участкам кода языка (например, атрибут langв HTML или xml:lang в XHTML), как описано в стандарте RFC1766.


Следующее правило применяется ко всем элементам p для которых определен атрибут title:

Code
p[title]
{color:#f00;}

Селектор сопоставляющий правило всем элементам div которые имеют атрибут class со значением error:

Code
div[class=error]
{color:#f00;}

Можно использовать и множественные селекторы атрибутов, это дает возможность отбора элементов по нескольким атрибутам. Ниже представлен пример правила применяемого к элементам blockquote которые имеют атрибут класс в точности равный "quote" и атрибут cite (независимо от значения этого атрибута):

Code
blockquote[class=quote][cite]
{color:#f00;}

Используйте селекторы потомков. Селекторы потомков помогут избежать использования множества классов в разметке. [Roger Johansson]


2.3 Технические хитрости: Оформление ссылок

Будьте осторожны со стилями для ссылок. Обратите внимание на то, что классический якорь (<a name="anchor">) реагирует на псевдо классы :hover и :active. Чтобы исключить это, используйте в качестве якоря идентификаторы элементов, или немного более заумный синтаксис :link:hover, :link:active. [Dave Shea]

Указывайте отношение документов для ссылок. Атрибут rel предназначен для указания отношения текущей страницы к документу указанному в атрибуте href.

Code
a[rel~="nofollow"]::after
{
content: "\2620";
color: #933;
font-size: x-small;
}
a[rel~="tag"]::after {
content: url(http://www.technorati.com/favicon.ico);
}

Здесь мы используем селектор атрибутов для списка значений разделенных пробелами. Ссылки, для которых установлен nofollow будут обозначены темно красным черепом, а те для которых установлен tag будут обозначены иконкой Technocrati. [Handy CSS]

Внешние ссылки можно отметить автоматически. Многие использует нестандартное значение rel="external", чтобы выделить ссылки на внешние сайты, добавлять его к каждой ссылке трудоемкая и необязательная работа. Следующее правило добавляет стрелку после каждой ссылки ведущей на внешний сайт. [Handy CSS]

Code
a[href^="http://"]:not([href*="smashingmagazine.com"])::after
{content:
"\2197";
}

Убрать точки вокруг ссылок можно с помощью outline:none;.

Code
a:focus { outline: none; }

2.4 Технические хитрости: CSS-техники

Используйте идентификатор для тега body. Во многих случаях использование идентификатора для тега body позволяет управлять оформлением элементов в зависимости от того, на какой странице находится пользователь. К тому же это дает возможность изменять оформление документа не меняя файл стилей и страницу. [Ryan Parr, Переключатель стилей,Адаптивная разметка]

С помощью CSS можно создавать колонки одинаковой высоты. Техника создания колонок одинаковой высоты без использования фоновых изображений. Создание колонок одинаковой высоты с помощью фоновых изображений.

Вертикальное выравнивание с помощью CSS. Представьте, что у вас есть элемент меню высотой 2em, вы можете легко отцентрировать текст по вертикали, задав line-height: 2em. [Evolt.org]

Используйте псевдо элементы и классы. Псевдо классы и псевдо элементы можно использовать для форматирования элементов не представленных в иерархии документа, например, нет таких элементов как первая строка параграфа или первая буква строки. Можно использовать псевдо классы :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after и другие.

Использование изображения для тега <hr> может быть хорошим дополнением к странице. [CSS: Best Practices]

Можете использовать один и тот же (X)HTML код для навигации на всех страницах. Многие сайты подсвечивают в навигации текущее местонахождение пользователя, но это может быть неудобно потому что необходимо менять HTML код навигации на каждой странице. Можно ли этого избежать? [Ten More CSS Tricks you may not know]

Code
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

Добавьте идентификатор к тегу body, он должен отражать текущее место пользователя и изменяться когда он переходит на другую страницу.

Code
#home .home, #about .about, #contact
.contact {
commands for highlighted navigation go here
}

Используйте margin: 0 auto; для горизонтального центрирования разметки. Чтобы отцентрировать элемент по горизонтали нужно задать его ширину и горизонтальные поля. [Roger Johansson]

Code
<div
id="wrap">
<!-- Your layout goes here -->
</div>
Code
#wrap {
width:760px; /* Change this to the width of your layout */
margin:0 auto;}

Добавить CSS стили можно и к RSS. Можно сделать намного больше используя XSL, но и CSS сделает RSS более привлекательными. [Pete Freitag]

Скрыть CSS от старых браузеров. Чтобы скрыть CSS файл от старых браузеров используйте директиву @import. [Roger Johansson]

Code
@import "main.css";

Всегда устанавливайте margin и padding для блочных элементов. [10 CSS Tips]

Устанавливайте width или margin и padding. Я использую следующее правило, если устанавливаю для элемента width, то не устанавливаю для него margin и padding и наоборот. Если не следовать этому правилу, можно получить множество проблем, особенно когда ширина задана в процентах. Поэтому я сначала устанавливаю ширину контейнеров, а потом поля и отступы для дочерних элементов. [Jonathan Snook]

Исключите одновременное применение padding/borders и width к элементам. IE5 неверно использует модель представления документа в виде блоков, это может привести к тому, что страница превратиться в мешанину. Один из способов исправить эту проблему применять padding к родительскому элементу, а width к дочернему. [CSS Crib Sheet]

Предоставляйте стили для печати. Добавить файл, содержащий стили для печати можно точно таким же способом, как и обычный файл CSS:

Code
<link
rel="stylesheet"type="text/css" href="print.css" media="print">
Code
<style type="text/css"
media="print">@import
url(print.css);</style>

это гарантирует, что эти стили будут использоваться только для печати и не повлияют на внешний вид страницы на экране. В стилях для печати необходимо использовать черный текст на белом фоне и удалить все лишние элементы. 15 минут на подготовку к печати, More about CSS-based print-Layouts. [20 pro tips]


2.5 Технические хитрости: Исправляем баги IE

Поддержка полупрозрачных PNG в IE. Теоретически изображения в формате PNG поддерживают различные уровни прозрачности, но отсутствие их поддержки в Internet Explorer 6, не позволяет широко использовать это их достоинство. [CSS Tips, Outer-Court.com]

Code
#regular_logo
{
background:url('test.png'); width:150px; height:55px;
}
/* \ */
* html #regular_logo
{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='test.png', sizingMethod='scale');
}
/* */

Min-width и max-width в IE. Для этого можно использовать выражения. [Ten More CSS Trick you may not know]

Code
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto");
}

В IE можно использовать условные комментарии. Самый безопасный способ задать специальные стили для IE/Win это использоватьусловные комментарии. Использование условных комментариев вместо хаков сводит вероятность проблем в будущем к минимуму. Так их можно использовать чтобы подключить файл стилей, содержащий исправления для IE/Win [Roger Johansson]

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

Кодинг: Поиск вдохновения

Экспериментируйте с CSS. Экспериментируйте с фоновыми изображениями, цветами, наследованием, выравниванием и селекторами. Play with positive and negative margins. [Chric Casciano]

Учитесь у других. Исследуйте хорошие сайты, HTML код любого сайта легко доступен, смотрите какие методы используют другие разработчики и перенимайте те которые могут быть полезны и вам. [20 pro tips]

Источник: Design For Masters


Источники и полезные ресурсы


Категория: CSS | Добавил: likbezz (13.04.2009)
Просмотров: 10170 | Комментарии: 1 | Теги: которые, Стили, кодинг, чтобы, использовать, элементов, классов, Roger, свойства, Johansson
Всего комментариев: 1
0  
1  Xstroy [Материал[13.10.2011]

Возник вопрос.
А есть возможность с помощью стилей прописанных в теле статьи переназначить кодировку страницы?
Этот вопрос возник на фоне невозможности на некоторых англоязычных сайтах писать по русски - буковки корявые получаются, а в браузере конечно никто сам менять не будет.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]