Блог свободен от NOFOLLOW!

14 правил для создания удачных CSS

Дата: 29-11-2009 | Автор: Yaroslav.CH | Рубрика: Каскадные листы стилей (CSS)
Метки: ,

18

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

В этой статье вы найдете 14 советов, которые помогут вам написать корректный CSS код для будущего проекта.

1. Сбрасывайте стандартные стили браузеров — «Reset CSS»

Целью использования сброса стилей является минимизация несоответствий в браузерах, таких как — высота строк, отступы, размеры заголовков и т.д.

Использование Reset CSS позволяет:

  • сбросить CSS по-умолчанию, что дает возможность устранить расхождения в браузерах;
  • создать жесткую сетку, которая позволяет поддерживать даже самые сложные макеты;
  • создать стили форм для пользовательских интерфейсов;
  • создать стили для печатных версий страниц сайта.

Существует несколько наиболее популярных ресетов и фреймворков CSS Reset: Eric Meyer's CSS Reset, Yahoo's CSS Reset, Google CSS Library Кроме того,  вы можете самостоятельно написать «reset.css» под свои нужды .

html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe,
blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, input, select, textarea  
 
{margin:0; padding:0;}

2. «Стенографируйте» CSS

Одним из наилучших и наиболее важных свойств CSS является возможность его минимализации.

Некорректный код

{
margin-top:10px;
margin-right:7px;
margin-bottom:10px;
margin-left:7px;
 
padding-top:10px;
padding-right:7px;
padding-bottom:10px;
padding-left:7px;
 
font-size:12px;
font-weight:bold;
font-family: Arial, Verdana, Tahoma, sans-serif;
}

Правильный код

{
margin: 10px 7px 10px 7px;
 
padding: 10px 7px 10px 7px;
 
font:bold 12px Arial, Verdana, Tahoma, sans-serif;
}

3. Используйте классы и идентификаторы с умом

Большинство новичков добавляют классы и ID практически ко всем элементам на странице, в чем нет ни малейшей необходимости.

Некорректный код

<div id="wrapper" class="wrapper">
<a class="link" href="#">Home</a>
<a class="link" href="#">About</a>
<a class="link" href="#">Services</a>
<a class="link" href="#">Contact</a></div>

Правильный код

<div id="wrapper">
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">О компании</a></li>
	<li><a href="#">Услуги</a></li>
	<li><a href="#">Контакты</a></li>
</ul>
</div>

4. Упорядочивайте CSS файл

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

Ниже, для примера, представлена структура типичного CSS-файла.

/*Сброс стилей*/
Удалите поля и отступы элементов
 
/*Базовые элементы*/
Определите стили для базовых элементов: body, h1, h2, h3, h4, h6, ol, ul, dl, p etc.
 
/*Общие классы*/
Определите стили для общих классов
 
/*Основной макет*/
Определите стили для основного макета: шапка, подвал, боковая колонка и т.д.
 
/*Шапка*/
Определите стили для шапки сайта
 
/*Содержимое*/
Определите стили для содержимого сайта
 
/*Подвал*/
Определите стили для подвала сайта
 
/*Остальное*/
Определите стили для остальных элементов сайта

5. Используйте обусловленные листы стилей

Internet Explorer — наиболее проблемный браузер. К счастью, есть возможность использовать обусловленные комментарии для указания CSS, стили которого будут использоваться только для IE.

Для того, чтобы подключить стили, предназначенные только для, например, IE6.х — создайте файл ie6.css и подключите его с помощью нижеследующей конструкции.

<!--[if lte IE 6]>
	<link rel="stylesheet" href="ie6.css" mce_href="ie6.css" type="text/css" media="screen" />
 
<![endif]-->

6. Пишите атрибуты стилей в одну строку

Рекомендуется писать все атрибуты в одну строку — это позволит сохранить ваш CSS опрятным и небольшим по размеру. Также это помогает удалить ненужные пробелы и символы.

Некорректный код

h2 {
font-size:18px;
color: #333333;
background: #cccccc;
}

Правильный код

h2 {font-size:18px; color:#333333; background:#cccccc; }

7. Комбинируйте элементы

Одним из лучших способов избежать увеличения размера файла, является группировка селекторов.

Некорректный код

h1 {
font-family: Arial, Helvetica, sans-serif; color:#333;
}
h2 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }
h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }

Правильный код

h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; color:#333;  }

8. Используйте «Margin» для центрирования макета

Многие новички не могут понять, почему нельзя просто использовать float:center для центрирования блочных элементов. К сожалению, все не так просто и необходимо использовать:

#Container { margin:0 auto; /* top, bottom - and left, right*/
width:xxxpx;  }

9. Комментируйте свой код

Комментирование кода является не только формой вежливости в среде разработчиков (помните, что кроме вас с сайтом могут работать и другие люди), но также позволит вам гораздо легче ориентироваться в собственном файле.

Для добавления комментария, просто поставьте /* перед комментарием и */ после:

h2 {padding-top:10px; /* отступ от верхнего края - 10 пикселей*/  }

10. Имена классов и ID

При верстке макета всегда возникает необходимость вводить новые классы и идентификаторы, придавая им определенные названия. Как и в предыдущем пункте, необходимо учитывать тот факт, что над сайтом может работать несколько человек, а потому названия должны быть логичными и легкодоступными.

Не обозначайте стили «А1», «С12» и прочими не интуитивными определениями — оптимальнее всего придавать имена, исходя из названия элемента, к которому применяются свойства данного класса. Например image-logo, расположенный в блоке комментария «Шапка» (см. п.4) — будет означать стиль, применяемый к логотипу в шапке сайта, а text-copyright — стиль, отвечающий за внешний вид текста копирайта.

Также можно расширить модель формирования имени, за счет добавление основного свойства класса. Например, text-copyright-red или text-quote-small.

11. Не пишите свойства по-умолчанию

Все свойства CSS имеют свои значения по-умолчанию. Не имеет смысла явно их определять, поскольку они уже предопределены ранее.

Например, значения тега P по-умолчанию:

p { font-weight:normal; font-style:normal;text-decoration:none; }

12. Подключайте CSS-файлы отдельно

Многие включают CSS стили прямо в тело страницы. Это неправильно, поскольку:

  • отдельный CSS-файл подключается один раз для всего сайта и кешируется бразуером;
  • отдельный файл позволяет уменьшить суммарный размер сайта, за счет отсутствия дублей кода;
  • обеспечивается централизованное управление стилями на всех страницах сайта — нет необходимости при изменении стиля править код на всех страницах, т.к. исправления вносятся только в один файл.

Для того, чтобы подключить внешний CSS-файл, используйте следующий код:

link rel="stylesheet" href="http://www.your-site-name.com/your-stylesheet-name.css" type="text/css" media="screen"

13. Используйте несколько CSS-файлов

Не загромождайте основной файл теми стилями, которые должны применяться только в определенных случаях.

Например, в отдельный файл стоит вынести стили, применяемые «печатных» версий страниц. Поскольку у каждого подключаемого листа есть атрибут media, вы можете воспользоваться им, разместив следующую конструкцию:

link rel="stylesheet" href="http://www.your-site-name.com/your-stylesheet-print.css" type="text/css" media="print"

14. Используйте средства сжатия CSS

Если у вас нет желания тратить время на модифицирования старых CSS-файлов, вы можете воспользоваться online-сервисами:

А какие правила знаете вы?

В статье использованы материалы сайта Developer's Paradise

Сейчас самое время поделиться статьей с другими!

А еще можно почитать:

Комментарии 18 комментариев

перейти к форме для комментирования

Я б не сказал, что если код не написан в одну строку, то его нужно называть некорректным. Ведь также легче в нём рабобраться.

ОтветитьОтветить

@Cosmo, спасибо за комментарий. Откровенно говоря, я знал, что этот момент станет спорным вопросом и именно потому назвал именно «некорректным», а не «неправильным» :)

Для меня особой разницы нет как она написан, но если в строчку — меньше скроллить и меньше искать.

Потому лично для меня именно «корректнее» — в строчку.

ОтветитьОтветить

По ходу ЦСС к этому блогу писали не Вы. Ведь он противоречит Вашим условиям.

Зачем писать вот такую огромную байду:

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input{ margin:0; padding:0; }

если можно так:

*{margin:0; padding:0; border:0;}

и более того, за ней вот такую:

body{ margin:0px; padding:0px;

А это?

a{ color:#000000; сами рассказывали о color:#000;

Дальше мне просто надоело.

Прежде чем писать подобные статьи сначала сходили б сами на: # Css Tidy

# Clean Css и т.д.

ОтветитьОтветить

@Dr. Pretender, полностью согласен с Вашей критикой — но Вы правы, первоначальный CSS к этой теме написан действительно не мной, хотя отметим, что подобная «заимствованность» наблюдается и в Вашем блоге и, например, нет того же reset ;)

Признаю, к сожалению, пока что просто не дошли руки привести его в надлежащий вид — больше занимался функциями, а сама статья написана в качестве мануала для себя самого, которым хотелось поделиться и с читателями :)

ОтветитьОтветить

@© Yaroslav.Ch,

Я пока что не писал статей, о оптимизации CSS. И использую стандартную тему поставляемую с вордпрессом. Сейчас медленно пытаюсь сверстать свою тему под блог. Первой строкой в файле стилей которой написано:

*{margin:0; padding:0; border:0;}

Если мне удастся её доделать, приму всю конструктивную критику. +возможно напишу статью о создании темы.

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

ОтветитьОтветить

@Dr. Pretender, да, я знаю, что у Вас используется Kubrik.

Если действительно напишете и материал будет полезным и интересным — с удовольствием почитаю и поставлю на нее ссылку :)

Нет проблем — почему бы Вам не оставить к ним комментарии? Я всегда открыт для обсуждения конкретных ситуаций и мне интересно получать новый опыт и оценку читателей :)

А насчет того, что часть материалов спорны — соглашусь, у каждого ведь свое понимание и восприятие и, кроме того, я же пишу не каноны, а только лишь собственное видение, основанное на индивидуальном и достаточно объемном опыте :)

В общем — пожалуйста, комментируйте спорные для Вас моменты и мы их обязательно обсудим :) Буду ждать!

ОтветитьОтветить

Ну, можна вважати, що бета варіант теми вже готовий. Там ще багато чого можна поколупати. Дуже напрягло, що на віддаленому серваку, шаблон повів себе зовсім неочікувано. Але принаймні той код (особливо CSS) вже наближається до викладених тут рекомендацій.

ОтветитьОтветить

@Dr. Pretender: вітаю! Сподіваюсь, Ви опублікуєте детальну інструкцію із розробки та викладете тему для загального перегляду?

ОтветитьОтветить

Пишите атрибуты стилей в одну строку

Вот с этим полностью не согласен, для чего это нужно, почему это удачный вариант? Для сжатия есть скрипты, а писать нужно именно с позиции удобочитаемости кода.

Dr. Pretender,

Reset в виде *{margin:0; padding:0; border:0;} не есть хорошо, т.к. сэеономив пару строк кода, тем самым приходится для каждого элемента DOM что-то применять. И это достаточно упрощенный вариант. Reset должен устранить разногласия между браузерами, переопределив разыне дефолтные стили, которые зависят от браузеру в точный явный вид. Этими 3 свойствами все не ограничивается. Высота полей, outline и др тоже часто приходится в reset часть вписывать.

В плане следования тому, о чем публикуется материал я согласен с Dr. Pretender, выглядит немного стремновато если честно, хотя впринципе на все руки не доходят, по себе сам знаю. А статьи, которые начинаются 10, 15, 20 + о чем-то вообще можно не читать в плане проф роста.

В плане врстки можно посмотреть www.webmolot.com и понять разницу.

ОтветитьОтветить

Я тоже использую для reset универсальный селектор. Но вместо border (который по умолчанию есть у очень немногих элементов) я пишу border-collapse:collapse, чтобы убрать зазоры между табличными ячейками, а также блоками с display:table-cell.

ОтветитьОтветить

@Alexpts:

Вот с этим полностью не согласен, для чего это нужно, почему это удачный вариант?

Меньше лишних абзацев, меньше лишних символов — меньше размер CSS-файла. Меньше размер файла — быстрее загрузка.

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

В плане следования тому, о чем публикуется материал я согласен с Dr. Pretender, выглядит немного стремновато если честно,

К сожалению, не могу не согласиться, но проблема в том, что я вношу в блог много разных изменений и делаю это довольно часто. Поэтому, в отличие от один раз сделанного сайта, содержать весь этот «зоопарк» в идеальном состоянии — не всегда хватает времени.

А статьи, которые начинаются 10, 15, 20 + о чем-то вообще можно не читать в плане проф роста.

Не совсем понимаю — почему? Для меня наоборот — структурированная информация гораздо оптимальнее и удобнее, чем размазанное по тексту описание правильного выполнение задачи.

Спасибо, посмотрю.

ОтветитьОтветить

@Alexpts: На самом деле только три свойства (margin, padding, border-collapse) действительно нуждаются в глобальном ресете (и то третье не в таком уж глобальном, пока table-cell не вошло в широкое употребление). «Высота полей» у разных элементов разная, её в общий ресет не засунешь.

Я в своё время писала небольшое размышление на этот счёт: webdevelopernotes.ru/2010...iversalselector/ Однозначно пришла к выводу, что в ресете можно указывать только не наследуемые свойства.

ОтветитьОтветить

@Yaroslav.CH

Это нужно автоматизировать, есть компрессоры кода, зачем челоеку выполнять обезъяний труд и еще потом с ним разбираться в сжатом виде.

ОтветитьОтветить

@Княгиня:

На самом деле это не так. Браузеры более сильно отличаются, я не раз с этим сталкивался. И сам факт использования * зло. Если у вас DOM меняется динамически, каждый раз происходит пересчет таких правил.

ОтветитьОтветить

Добавил бы, что один период так был помешан на оптимизации, что даже не ставил «;» после последнего свойства. Но часто замечаю по ходу дела, что когда нужно сделать кроссбраузерно, то забываешь о таких деталях и на первый план выходит более-менее качественное отображение в браузере.

ОтветитьОтветить

Здравствуйте!

Благодарю за отличную статью. Подскажите пожалуйста можно ли, как то сделать подключение, дополнительных стилей не в: header, а не посредственно при редактировании какого либо файла? Скажем: sidebar или каких либо определённых элементов в: footer.

Например:

<strong><em>Рубрики:</em></strong>

На сам блок категорий берутся основные стили а вот для слова рубрики подключить дополнительные.

Необходимо это, чтобы из за какого нибудь эффекта надписи, не грузить основной лист. Спасибо!

ОтветитьОтветить

@Progress-project:

Честно говоря, вопрос не совсем понятен. Вот этот пример

Рубрики:

это тэги, но не CSS-стили. Да, их конечно можно использовать.

Если же речь идет именно о стилях, то тогда уже проще указывать отдельный стиль в самом шаблоне, например:

<p style="font-weight:bold;">какой-то текст жирным </p>

Но злоупотреблять таким способом не стоит, поскольку он излишне грузит шаблон и замедляет общую загрузку сайта. Если это единоразовое использование — можно сделать так, если же многоразовое — то лучше вынести в CSS-лист. Кроме того, сам файл со стилями можно оптимизировать с помощью соответствующих инструментов, чтобы он занимал меньше места и быстрее грузился.

ОтветитьОтветить

Добрый день.

Спасибо за разъяснения, конечно я немного другое имел в виду, да и пример мой почему то отобразился не весь. Но в любом случае вопрос решён, благодаря: proofsite.com.ua. Спасибо!

ОтветитьОтветить

А Вы оставили комментарий? Ваше мнение очень важно!

Все комментарии до публикации проходят обязательную ручную модерацию, согласно Правил комментирования. Если вы планируете комментарий только ради обратной ссылки на ваш сайт – не трудитесь, смысла нет.