Конечно, каждый может написать CSS. Даже программы делают это для вас сейчас. Но хорош ли CSS? Вот 5 советов, как начать улучшать свой.
1. Сброс
Серьезно, всегда используйте какой-либо сброс . Используете ли вы сброс Eric Meyer , YUI Reset или свой собственный сброс, просто используйте что-нибудь.
Это может быть так же просто, как удаление полей и отступов из всех элементов:
|
1
2
|
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;
|
Эрик Мейер и YUI Reset потрясающие, но для меня они просто зашли слишком далеко. Я чувствую, что вы в конечном итоге сбрасываете все, а затем переопределяете множество свойств элементов. Вот почему Эрик Мейер рекомендует вам не просто взять его таблицу стилей сброса и добавить ее в свои проекты, если есть более эффективный способ ее использования. Твик это. Построй на нем. Сделай это своим.
Ох, и, пожалуйста, остановите это:
|
1
|
* { margin: 0;
|
Обработка занимает больше времени, и что, по вашему мнению, должно произойти с переключателем при удалении отступа? Элементы формы могут иногда делать некоторые забавные вещи, поэтому лучше оставить некоторые из них в покое.
2. Алфавитный
Маленькая Викторина
Какой пример, по вашему мнению, быстрее найти свойство margin-right ?
Пример 1
|
1
2
3
4
5
6
7
8
9
|
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
|
1
2
3
4
5
6
7
8
9
|
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
|
Вы не можете сказать мне, что Пример 2 не быстрее. Располагая по алфавиту ваши свойства, вы создаете эту последовательность, которая поможет вам сократить время, затрачиваемое на поиск определенного свойства.
Я знаю некоторых людей, которые организовывают один путь, и других, которые организуют другой, но в моей компании мы приняли общее решение для всех организовать по алфавиту. Это определенно помогло при работе с чужим кодом. Я передергиваюсь каждый раз, когда захожу в таблицу стилей, где свойства не отсортированы по алфавиту.
3. Организация
Вы должны организовать свою таблицу стилей так, чтобы было легко находить вещи и связанные элементы близко друг к другу. Используйте комментарии эффективно. Например, вот как я структурирую свои таблицы стилей:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/*****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. Согласованность
Каким бы способом вы ни решили написать код, придерживайтесь его. Мне надоела целая 1 строка против нескольких строк в вашей дискуссии по CSS. Там нет споров! У каждого свое мнение, поэтому выберите то, что вам подходит, и придерживайтесь его во всей таблице стилей.
Лично я использую комбинацию обоих. Если селектор будет иметь более 3 свойств, я разбиваю его на несколько строк:
|
1
2
3
4
5
6
7
8
9
|
div#header { float: left;
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left;
|
Это работает для меня, потому что 3 свойства — это то, что помещается на 1 строку в моем текстовом редакторе перед переносом на другую строку. Так что просто выясните, что работает для вас, и будьте последовательны.
5. Начните в нужном месте
Не смей трогать свою таблицу стилей, пока не напишешь свою разметку!
Когда я готовлюсь к нарезке сайта, я прохожу и размечаю весь документ от тега открывающего тела до тега закрывающего тела, прежде чем даже создавать файл CSS. Я не добавляю лишних элементов div, идентификаторов или классов. Я добавлю несколько общих элементов div, таких как header, content, footer, потому что я знаю, что эти вещи будут существовать.
Сначала отметив документ, вы не столкнетесь с такими заболеваниями, как дивит и классит, которые иногда могут быть смертельными! Вам нужно добавить этот материал только после того, как вы начнете писать CSS-код и поймете, что вам понадобится еще один хук, чтобы выполнить то, что вы пытаетесь достичь.
Используйте потомки CSS для выбора дочерних элементов; не просто автоматически добавить класс или идентификатор к элементу. Просто помните, что CSS бесполезен без хорошо отформатированного документа .
* Примечание редактора: я не могу подчеркнуть этот момент достаточно. Как сказал Тревор, даже не трогайте свой CSS-файл, пока разметка не будет завершена на 100%.
Вывод
Это лишь некоторые из советов, которые помогают мне писать лучший код. Это ни в коем случае не конец списка. Как я придумаю с другими, я поделюсь.
Какие у вас есть советы по написанию лучшего CSS?