Идеальный CSS
Прочитав множество статей по улучшению CSS, решил написать свою собственную об «Идеальном CSS» в моем личном понимании.
Для начала он должен быть удобен для меня. Работа с собственным CSS не должна вызывать у меня каких либо проблем. Также не стоит забывать про людей которые буду работать с этой версткой после. Если это получится, то Ваш CSS смело можно назвать идеальным.
Сброс
Для начала я обязательно делаю сброс стандартных настроек браузера. К сожалению они не везде одинаковые и могут добавить неудобств. Пример отображения <p> по умолчанию. С помощью CSS Reset можно избавиться от этой разницы для обеспечения кроссбраузерности стилей. Для этого я использую отдельный CSS, который я подключаю перед основным.
Пример моего reset.css:
a img, :link img, :visited img, abbr, acronym, fieldset, object {border: none;}
abbr, acronym {border-bottom: 1px dotted #999; cursor: help;}
address, caption, cite, code, dfn, em, strong, th, var, h1, h2, h3, h4, h5, h6 {font-style:normal; font-weight:normal;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, code, pre {margin:0; padding:0;}
body {background: #fff; font-size: 62.5%;}
caption, th {text-align:left;}
code, pre {white-space: pre-wrap;}
ol, ul {list-style:none;}
q:before, q:after {content:'';}
table {border-collapse:collapse; border-spacing:0;}
Данный CSS основан на YUI Reset CSS от Yahoo!
Разберем по пунктам:
a img, :link img, :visited img, abbr, acronym, fieldset, object {border: none;}
— Обычно мне не нужны границы.
abbr, acronym {border-bottom: 1px dotted #999; cursor: help;}
— «Подчеркивание», курсор. Красота.
address, caption, cite, code, dfn, em, strong, th, var, h1, h2, h3, h4, h5, h6 {font-style:normal; font-weight:normal;}
— Убираем курсив и вес шрифта.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, code, pre {margin:0; padding:0;}
— Убираем лишние отступы и величину поля.
body {background: #fff; font: 62.5% Tahoma, Geneva, sans-serif; }
background: #fff; — Теперь уж точно не будет сюрприза, что где-то фон не того цвета.
font: 62.5% Tahoma, Geneva, sans-serif; — Почему 62.5? Все просто. Если Вы измеряете в em или %, то после такого изменения 1em=100%=10px.
caption, th {text-align:left;}
— Убираем центрирование.
code, pre {white-space: pre-wrap;}
— Переносим слова если не влазят.
ol, ul {list-style:none;}
— Убираем маркеры списка, т.к. очень часто эти элементы используются для семантической верстки.
q:before, q:after {content:'';}
— Убираем обрамление цитат.
table {border-collapse:collapse; border-spacing:0;}
— Приводим в порядок таблицу.
Естественно все можно изменять по вкусу, но не забывайте — это файл сброса настроек, а не основной.
Не советую использовать универсальный селектор:
* {
margin: 0;
padding: 0;}
Это занимает больше времени на обработку и изменит в худшую сторону элементы подобные radio button.
Подведем итоги
— Не забудьте, что сначала всегда следует подключать CSS Reset, а потом все остальные стили.
— Используйте отдельный CSS-документ для CSS Reset
— Старайтесь избегать использование универсального селектора
— Избегайте избыточных описаний свойств при использовании CSS Reset
Всему свое время.
Даже не пытайтесь трогать CSS пока Вы не сделаете разметку!
Начните Вашу верстку с разметки страницы — header, content, sidebar, footer. Не используйте сразу никаких лишних div, id, clsss и прочего. В итоге вы получите идеальный семантический код. Уже после разметки можно взяться за CSS и заняться оформлением.
Организация
Организуйте свой CSS. Гораздо удобнее работать с элементами сайдбара если они все находятся в одном месте, а как удобно настроить базовые параметры если их не нужно искать среди параметров контента.
Пример организации:
/* Basic Elements */ body, h1-h6, a, p, и прочие. /* Basic Layout */ #header, #content, #sidebar, #footer. /* Header */ Все элементы из #header. /* Content*/ Все элементы из #content. /* Sidebar*/ Все элементы из #sidebar. /* Footer */ Все элементы из #footer.
Используя комментарии для обозначения групп, Вы сократите свое и чужое время на поиски нужных элементов.
Оформление
Стиль
Какой бы стиль кода Вы не выбрали, придерживайтесь его.
Не стоит загоняться спорами какой код лучше, многострочный или однострочный.
Я использую оба вида. Однострочный — элемент имеет один параметр. Многострочный — у элемента несколько параметров:
h3, h4, h5, h6 {font: 20px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;}
a:link, a:visited {
border-bottom: solid 1px #ebebeb;
color: #528fb2;
text-decoration: none;}
a:hover {color: #B6CEE0;}
Еще люблю оформлять вложения:
#header {
height: 140px;
padding: 40px 40px 0;
position: relative;}
#header h1 {
border: none;
padding: 0 0 10px;
text-transform: none;}
#header h1 a {
color: #fff;
font: 30px/40px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#header h1 span {
color: #d0eaff;
display: block;
font: 14px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#header ul {
display: block;
margin: 0;
padding: 0;}
#header ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0 20px 0 0;}
#header ul li.rss {
float: right;
margin: 0 0 0 20px;}
Удобно, правда?
Сортировка
Еще удобно когда все параметры отсортированы в алфавитном порядке. При долгой работе с таким отсортированным CSS взгляд мгновенно будет падать на нужные параметры.
h1 a {
background: #fff;
color: #fff;
font: 30px/40px "Trebuchet MS", Arial, Helvetica, sans-serif;}
h1 span {
background: #333;
color: #d0eaff;
display: block;
font: 14px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}
Сокращение
Напоследок можно сократить некоторые параметры:
Цвет:
background: #ffaa55;
заменить на:
background: #fa5;
Отступы и поля:
margin: 1px 2px 3px 2px; padding: 1px 2px 1px 2px;
заменить на:
margin: 1px 2px 3px; padding: 1px 2px;