![image](https://habrastorage.org/getpro/habr/post_images/3a1/58c/915/3a158c915a70a4cce6f2df91c4f32564.gif)
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 ничего не стоит без хорошо отоформатированного документа.
Это далеко не полный список некоторых советов, которые помогают мне писать лучший код. А какие советы используете вы?