Практически любой человек сможет написать CSS-код, в наше время любая программа сделает это за вас. Но будет ли это хороший CSS? Далее представлены пять советов по совершенствованию вашего CSS
1. Reset
Обязательно используете сброс настроек в том или ином виде. Вы можете использовать уже готовые решения ( Eric Meyer, YUI), или придумать свое, выбирайте что больше нравится.
Это может быть обычное удаление полей и отступов, у всех элементов:
Указанные выше готовые решения, конечно весьма впечатляют, но мне кажется что они немного чрезмерны. Я так и представляю себе, как вы сбрасываете все настройки у всех элементов, а затем заново их устанавливаете. Поэтому если вы решили использовать один из предложенных вариантов, не стоит полностью копировать весь CSS-файл, лучше измените его так, чтобы он максимально отвечал требованиям вашего проекта.
И пожалуйста не делайте следующего:
* { margin: 0; padding: 0; }
Этот прием увеличивает время обработки, и при удалении паддинга, некоторые элементы будут отображаться некорректно (например radio button). Элементы форм, при удалении всех настроек, могут вести себя непредсказуемо, поэтому сброс к ним лучше не применять.
2. Алфавитный порядок
В каком из примеров по вашему мнению быстрее можно найти свойство margin-right?
Согласитесь, что во втором примере свойство находится быстрее. Расположив свойства в алфавитном порядке, вы создадите эту последовательность, которая поможет вам сократить время, затрачиваемое на поиск специализированного свойства.
Я знаю множество людей, располагающих CSS-свойства разными способами, но в нашей компании мы пришли к соглашению, располагать все свойства в алфавитном порядке. Это помогает, когда приходится работать с кодом, написанным другими людьми. Мне досадно каждый раз, когда приходится работать с css-файлом, в котором свойства не расположены по алфавиту.
3. Группировка
Вы должны организовать ваш CSS-файл так, чтобы искомые объекты и связанные с ними свойства располагались рядом, также эффективно использование комментариев. Вот например мой способ группировки:
/*****Reset*****/
Remove margin and padding from elements
/*****Basic Elements*****/
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
/*****Generic Classes*****/
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently
/*****Basic Layout*****/
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
/*****Header*****/
Define all elements in the header
/*****Content*****/
Define all elements in the content area
/*****Footer*****/
Define all elements in the footer
/*****Etc*****/
Continue to define the other sections one by one
Использование комментариев и группировка схожих элементов, помогает быстро находить необходимые объекты и их свойства.
4. Последовательность
Какой бы способ написания кода вы не выбрали, придерживайтесь его. Меня уже тошнит от CSS-дебатов посвященных выбору правильного способа написания кода, 1-строчное против многострочного. Каждый имеет право на свое собственное мнение, так что выберите наиболее удобный для вас и используйте его во всех CSS-файлах.
Лично я использую комбинацию обоих способов. Если селектор содержит больше трех свойств, я разбиваю его на несколько строк.
Не начинайте писать css-стиль, пока не закончена разметка страницы.
Прежде чем создавать CSS-файл, я пишу всю разметку страницы начиная от открывающего тега body, до закрывающего. Я не добавляю лишних div-ов, id и классов, только некоторые характерные блоки, типа header, content, и footer.
Используйте наследование CSS-селекторов, для расположения дочерних элементов, не добавляйте автоматически классы и id к элементам. Помните главное: CSS ничего не стоит без хорошо отоформатированного документа.
Это далеко не полный список некоторых советов, которые помогают мне писать лучший код. А какие советы используете вы?
Автор: dreamhelg http://habrahabr.ru
[ Чтобы скачивать файлы
зарегистрируйтесь
, или
войдите
под своим логином ]
[Либо кликните по рекламе
Tak.ru
что ниже ↓ чтобы увидить
Ссылки на скачивание
]