en / ru

CSS красиво

Не воспринимайте эти рекомендации как правила. Воспринимайте как РЕКОМЕНДАЦИИ! Каждый пишет так, как ему удобно. Я лишь предлагаю один из методов.

Для начала приведу пример того, как я обычно пишу правила:

.content .pop-up {position:absolute; top:180px; left:460px; z-index:300; width:237px; padding:0 13px 7px; border:1px solid #398cdd; background:#fff; font-size:1.1em;}

Здесь некий контейнер с классом .pop-up абсолютно спозиционирован относительно .content (у которого есть position:relative;).

Итак, рекомендации.

1. Начнем со всего нашего файла со стилями.
1.1. В самом начале файла принято размещать общие стили (например для <body>, всех <p>,<input>,<a> и т.д.).
1.2. Далее всё там же можно расположить общие классы (которые используются в различных местах страницы).
1.3. Дальше идут все ваши стили в порядке использования в коде html (т.е. от шапки до футера).

2. Пробелы.
2.1. Не путайте правила ".style1 .style2" (с пробелом) с правилом ".style1.style2" (без пробела). Первое задает стиль для .style2 находящегося внутри .style1, а второе работает когда на элемент одновременно навешивают эти 2 класса (<p class="style1 style2">...</p>).
2.2. Ставьте пробел перед открывающей скобкой ( { ) и между правилами. Это очень хорошо визуально выделяет отдельные правила и поможет вам легче в них разбираться.
2.3. Некоторые ставят ещё пробелы после {, перед } и между свойством и его значением (.style { color: #000; }). Я считаю это весьма неудобным и визуально дизориентирующим.

3. Если правил много, то лучше их писать по одному в строчку. Некоторые любят переносит каждое новое свойство на новую строчку и ставит перед ним отступ. Я считаю это крайне вредным при и без того многострочных таблицах стилей (в разы увеличивается количество строк => многократно усложняется поиск, а новые отступы => существенное увеличение размера файла).

4. По мере возможности используйте сокращения записей.
4.1. Если кодовое обозначение цвета содержит парные комбинации, то они безболезненно заменяются одним символом (#ff0000 = #f00, #336699 = #369, #ffffff = #fff). НО, не путайте, к примеру, с #006000, запись которого никак нельзя сократить.
4.2. Сокращение для padding, margin, border-width и т.п. Есть 4 возможным варианта:
4.2.1. {margin:10px;} - размер передается всем 4-м сторонам.
4.2.2. {margin:10px 5px;} - первое число для верх-низ, а второе для лево-право.
4.2.3. {margin:10px 5px 8px;} - первое число для верха, второе для лево-право, третье для низа.
4.2.4. {margin:10px 5px 8px 2px;} - соответственно: верх, право, низ, лево (т.е. по часовой стрелке).

5. Аналогично можно компановать свойства font, border и т.п.
5.1. Для font свойства пишутся в следующем порядке: bold или normal, размер шрифта (через слэш можно задать высоту строки), название шрифт. font:bold 10px/16px Tahoma, Arial, Verdana, sans-serif;
5.2. Для границ: толщина, начертание, цвет. ( border:1px solid #000; ) Причем это для задания всех 4-х границ. Можно задать каждую границу отдельно (border-bottom, border-top, border-right, border-left). Аналогично возможно применить отдельные свойства к конкретной границе (border-bottom-color:#000;).

6. Завершайте даже последние параметры знаком ; ("точка с запятой"). Это значительно облегчит вам жизнь, когда надо будет добавить новое правило. Также незакрытое правило может привести к ошибкам в некоторых браузерах.

7. Старайтесь размещать правила в файле тематично (что к чему относится и где используется). Вам же потом будет легче искать стили.

8. Используйте комментарии для обозначения начала и конца такого тематического блока стилей.

9. Именование классов. Старайтесь именовать с одной стороны так, чтобы было понятно их назначение, а с другой - чтобы они не теряли смысл при использовании их в целях, не совсем идентичным тем, для которых вы их сделали, т.е. были универсальными. Например, плохой вариант именовать меню как .left-menu (учитывайте универсальность! оно в последствии может расположиться и не слева), лучше назвать .secondary-menu.

10. Помните, что имена классов могут кроме буковок и цифр содержать дефисы, подчеркивания и заглавные буквы: .box-style, .box_style, .boxStyle (очень помогает в целях читаемости классов в несколько слов). Однако не переусердствуйте и старайтесь придерживаться одного стиля наименования. В то же время, различные варианты можно использовать для сложносоставных классов для удобочитаемости. Вот пример совместного использования подчеркиваний и тире в названиях классов: можно сделать класс .icon_text-note, где "icon_" является общей частью для нескольких однотипных правил, а "text-note" это уточнение, к какому элементу относится.