]]>
]]>
Рейтинг@Mail.ru

Гигиена CSS кода

Материал из Веб программирование.

Перейти к: навигация, поиск

Это статья основана на статье «Как создать чистый и эффективный CSS код» и содержит некоторые общие правила написания качественного CSS кода.


  • Храните CSS во внешних файлах, присоединяя их к HTML документам тегами link.
<link rel="stylesheet" type="text/css" href="/css/common.css">
Это даст возможность браузеру сохранять такие файлы в кэше и не загружать лишний раз при переходах внутри сайта.
  • Всегда стремитесь минимизировать количество отдельных CSS файлов. Когда их число возрастает, внутри стилей становится сложно найти необходимое, особенно если селекторы в одном файле наследует те, что определены в другом. Именам файлов всегда стоит задавать осмысленные имена (например, common.css и print.css будут выглядеть понятнее, чем style1.css и vasya.css
Имена директорий, в которых хранятся таблицы стилей, так же стоит определять согласно стандартизованной (пусть даже в рамках одного сайта) схеме. Например, /css/* или /themes/theme_name/css/*. Кроме того, не стоит забывать о директиве @import, как хорошем вспомогательном средстве структуризации CSS файлов. Уже на этапе проектирования файлового фреймворка для сайта нужно избавить себя от потенциальной проблемы поиска по всему дереву файлов нужной таблицы стилей.
  • Практически никогда не стоит использовать inline CSS, т.е. определения стилей непосредственно внутри HTML кода с помощью атрибутов style. Во-первых, это противоречит логике (смысл применения CSS состоит в отделении стилей оформления от семантикидокумента, а не в смешивании того и другого), во-вторых, может сделать документ менее управляемым, блокируя возможность задавать стили тем или иным элементам из внешнего CSS.
Встраивание CSS является приемлемым в тех случаях, когда не предполагается правка кода в дальнейшем. Например, если он генерируется програмно для отображения в каких-то конкретных условиях. Но в этом случае, опять же, соит все взвесить, чтобы не перенести проблему с путанницей в стилях на уровень генератора кода.
  • Атрибуты id и class стоит использовать строго по назначению: id — для идентификации уникальных элементов, class — для объединения типовых элементов группы. С их помощью можно подчеркнуть структуру и логику построения документов. В то же время при неправильном использовании, HTML и CSS может стать более громоздским и неуправляемым.
  • Не стоит многократно повторять определение одного и того же класса для группы элементов, когда его можно определить для их общего контейнера. Например, вместо
<a class="nav" href="index.html">Home</a>
<a class="nav" href="info.html">Info</a>
<a class="nav" href="contents.html">Contents</a>
гораздо логичнее сделать
<div id="navlinks">
<a href="index.html">Home</a>
<a href="info.html">Info</a>
<a href="contents.html">Contents</a>
</div>
  • Отражайте иерархию HTML документов в CSS файлах. Например, вначале стоит дать наиболее общее описание для тегов, далее — перейти к описанию классов, сгруппированных согласно смысловым узлам страниц (общая разметка страницы, шапка, навигационные элементы, отдельные колонки и т.д.).
Благодаря хорошей структурированности стилей, их код можно сделать более лаконичным и легко воспринимаемым. Не понадобится лишний раз переопределять глобальные стили и делать аналогичные описания для разных элементов.
О поддержке структурированности CSS не стоит забывать не только при первоначальной верстке, но и при дальнейшей корректировке стилей, т.к. на этом этапе так же есть хорошие шансы создать беспорядок даже в грамотно-написанном CSS.
  • Не нужно лишний раз использовать !important. Очень часто его используют для исправления неполадок в частных случаях, но наличие !important само по себе может привести к дополнительным сложностям при дальнейшей работе с таким CSS. То же, кстати, относится к разнообразным хакам: если без них можно обойтись, значит без них нужно обойтись.
  • Совершенно бессмысленным шагом явялется использование цепочек id (например #main #maintable #navbar). id по определению предназначен для уникальной идентификации элементов и для определения стиля всегда достаточно простого указания его имени, без дополнительного уточнения. Цепочки уместно ипсользовать в отношении элементов и классов.
Источник — «http://webproger.ru/Gigijena_CSS_koda»
]]>
Google+
]]>
Личные инструменты
Хочешь еще цитату? xxx: Солдатам, пока горит спичка, надо раздеться и лечь, а с утра, пока горит спичка, одеться и заправить кровать.
xxx: У IT-шников, пока вырубается комп, раздеться и лечь, а пока он врубается, одеться и сесть за комп) в одном из чатов
веб-программирование
Просмотры
чтим

Deprecated: Function set_magic_quotes_runtime() is deprecated in /var/www/webproger/data/www/webproger.ru/1c6a72389c0fd92079ac7ae7cd356173/sape.php on line 218 Deprecated: Function set_magic_quotes_runtime() is deprecated in /var/www/webproger/data/www/webproger.ru/1c6a72389c0fd92079ac7ae7cd356173/sape.php on line 224

]]>
Rambler's Top100
]]>
]]>
]]>