1. Reset
Обязательно используете сброс настроек в том или ином виде. Вы можете использовать уже готовые решения ( Eric Meyer, YUI), или придумать свое, выбирайте что больше нравится.
Это может быть обычное удаление полей и отступов, у всех элементов:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td {
margin: 0; padding: 0;
}
Указанные
выше готовые решения, конечно весьма впечатляют, но мне кажется что они
немного чрезмерны. Я так и представляю себе, как вы сбрасываете все
настройки у всех элементов, а затем заново их устанавливаете. Поэтому
если вы решили использовать один из предложенных вариантов, не стоит
полностью копировать весь CSS-файл, лучше измените его так, чтобы он
максимально отвечал требованиям вашего проекта.
И пожалуйста не делайте следующего:
* {
margin: 0; padding: 0;
}
Этот прием
увеличивает время обработки, и при удалении паддинга, некоторые
элементы будут отображаться некорректно (например radio button).
Элементы форм, при удалении всех настроек, могут вести себя
непредсказуемо, поэтому сброс к ним лучше не применять.
2. Алфавитный порядок
В каком из примеров по вашему мнению быстрее можно найти свойство margin-right?
Пример 1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
Пример 2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
Согласитесь, что во втором примере свойство находится быстрее.
Расположив свойства в алфавитном порядке, вы создадите эту
последовательность, которая поможет вам сократить время, затрачиваемое
на поиск специализированного свойства.
Я знаю множество
людей, располагающих 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-файлах.
Лично я использую комбинацию обоих способов. Если селектор содержит больше трех свойств, я разбиваю его на несколько строк.
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
5. Начните правильно
Не начинайте писать css-стиль, пока не закончена разметка страницы.
Прежде чем создавать CSS-файл, я пишу всю разметку страницы начиная от
открывающего тега body, до закрывающего. Я не добавляю лишних div-ов,
id и классов, только некоторые характерные блоки, типа header, content,
и footer.
Используйте наследование CSS-селекторов, для
расположения дочерних элементов, не добавляйте автоматически классы и
id к элементам. Помните главное: CSS ничего не стоит без хорошо
отоформатированного документа.
Это далеко не полный список некоторых советов, которые помогают мне писать лучший код. А какие советы используете вы? |
