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

В данной статье я перечислю несколько советов, как можно работать с CSS более эффективно и безопасно.

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

Советы по использованию CSS

• Перед тем как начать создание сайта, сбросьте настройки браузеров по-умолчанию
  Данный совет касается того, что в различных браузерах, значения различных CSS свойств по-умолчанию - различаются. Это приводит к тому, что сайт выглядит по разному в различных браузерах.
  Как минимум рекомендуют устанавливать в 0, настройки для свойств padding и margin.
  Это можно сделать например вот так:
  * {margin:0px;padding:0px;}
  Так же неплохо задавать размер шрифта для всей страницы. Например, в Опере размер шрифта по-умолчанию намного меньше, чем в FireFox или IE.
  Данный совет может сберечь очень много времени при разработке качественного кросс-браузерного сайта.
• Создайте свою библиотеку CSS правил.
  Так как для элемента возможно задание нескольких классов, то можно создать библиотеку классов, которые отвечают за конкретное свойство. Выглядеть это может вот так: .width100 { width: 100%; }
  .width50 { width: 50%; }
  .floatLeft { float: left; }
  .floatRight { float: right; }
  .alignLeft { text-align: left; }
  .alignRight { text-align: right; }
  Тогда что бы создать div шириной 50% с левым выравниванием, надо написать вот так:
  <div class="width50 alignLeft"></div>
• Разделяйте свой CSS файл на смысловые секции
  Можно сделать, например, секции: Глобальные, Навигация, Заголовок, и т.д. Выделяйте секции комментариями, что бы их можно было легко найти в файле. Например: /*-----------------------------------*/
  /*----------->>> Меню <<<------------*/
  /*-----------------------------------*/
  
• Внутри каждой секции (смотри предыдущий совет) все стили перечисляйте в алфавитном порядке.
  Таким образом, вам будет намного легче искать стили по CSS файлу, особенно если файл большой.
• Используйте как можно меньше недокументированных возможностей.
  В сети Интернет постоянно появляются новые публикации, как можно заставить некоторые браузеры пропускать (или наоборот понимать) определенным образом сформированное CSS правило. Старайтесь избегать применения таких уловок. Применяйте их только если это хорошо задокументированный баг конкретного браузера и если вы уверены, что в дальнейшем (в будущих версиях браузеров) не будет проблем (если уловка не нарушает стандарт CSS).
• Называйте классы и id правильно.
  Давайте классам и id имена по их назначению, а не положению на странице. Иначе может получиться так, что вы назовете класс right_col, а затем перенесете данную колонку влево. Получится, что название класса не будет соответствовать действительности и, более того, будет вводить в заблуждение. Лучше назвать нейтрально: sidebar1, sidebar2, image_logo.
• Используйте сокращенную нотацию.