В связи с выходом CSS3 и усложнением его синтаксиса, могут возникать вопросы касательно оформления, а именно форматирования, кода CSS.
Прежде всего – для чего это необходимо. Основная мотивация – это помощь себе самому. Допустим вы написали код, но спустя пару месяцев, полгода, а то и года необходимо разобраться, что в нём к чему и внести правки. Если код оформлен доступно, то это облегчит жизнь не только вам, но и тому, кому, может быть, придётся работать с вашим кодом.
ВНИМАНИЕ! Если вы читаете запись в RSS, то вы, скорее всего, увидите некорректное оформление блоков кода. Поэтому крайне рекомендую читать запись непосредственно в блоге.
1. Отступы
Прежде, чем говорить о форматировании CSS3 правил, стоит сказать об общем оформлении кода, дабы кто им не пользуется. К примеру, возьмём следующий css-код:
width: 1008px;
margin: 0 auto;
background: url(pic_elements/bg.png) repeat-y;
}
#total2 {
margin: 0 280px 0 220px;
}
#menu_top {
text-align: center;
padding: 7px 0;
}
#lpanel {
float: left;
width: 160px;
padding: 7px 35px 10px 25px;
font-size: 14px;
}
a#logo {
display: block;
width: 156px;
height: 102px;
background: url(pic_elements/logo.png) no-repeat;
text-decoration: none;
}
#slogan {
color: #b2b2b2;
padding: 5px 0 25px 0;
text-align: justify;
font-size: 12px;
}
С первого взгляда непонятно кто к кому как относится и почему. Для того, чтобы это выяснить, нужен код html, который покажет что, где и как, расставив всё на свои места.
<div id="total2">
<div id="menu_top">меню</div>
</div>
<div id="lpanel">
<a href="#" id="logo"> </a>
<div id="slogan">Слоган</div>
</div>
</div>
Всё просто: общий контейнер, в котором вложены ещё два контейнера, в которых, в свою очередь, ещё пару контейнеров.
А теперь вернёмся к коду css. Как сделать, чтобы не глядя на html сразу стало понятно где кому своё место? Правильно, отформатировав по образу и подобию.
width: 1008px;
height: auto !important;
min-height:100%;
height: 100%;
margin: 0 auto;
background: url(pic_elements/bg.png) repeat-y;
}
#total2 { margin: 0 280px 0 220px; }
#menu_top {
text-align: center;
padding: 7px 0;
}
#lpanel {
float: left;
width: 160px;
padding: 7px 35px 10px 25px;
font-size: 14px;
}
a#logo {
display: block;
width: 156px;
height: 102px;
background: url(pic_elements/logo.png) no-repeat;
text-decoration: none;
}
#slogan {
color: #b2b2b2;
padding: 5px 0 25px 0;
text-align: justify;
font-size: 12px;
}
Лично я (ещё из программирования) привык использовать именно такой стиль отступов – стиль "K&R". Использую его, обычно, с отступами в один tab или 3 пробела (реже 4).
2. Пробелы между значениями и скобками
А всё для того, чтобы проще читалось.
-webkit-transform: translateZ( -100px ) rotateY( 45deg );
Хотя, если честно, я бы опустил пробелы после скобки открывающей и перед скобкой закрывающей в первом примере. Правила тона хоть и гласят о том, что для глаза лучше чтобы они были, но лично меня они, при наличии аргументом через запятую, даже отвлекают. А во втором случае наоборот – они как-то гармонично входят. В общем, дело вкуса.
3. Пробелы для выравнивания схожих параметров в соседних строках
0% { background: red; -webkit-transform: rotate( 0deg ); }
33% { background: blue; -webkit-transform: rotate( -5deg ); }
67% { background: green; -webkit-transform: rotate( 5deg ); }
}
Так легче не только видеть, что, где и как, но и дебагить.
4. Лишние отступы для схожих параметров
-moz-box-shadow: 1px 2px;
-webkit-box-shadow: 1px 2px;
Полагаю ничего пояснять не надо. Всё для удобства.
5. Выравнивание в блоках
А теперь, собирая вышесказанное, оформление блока свойства с несколькими вложенными значениями.
-moz-linear-gradient(
hsla( 0, 0%, 100%, 0.1 ),
hsla( 0, 0%, 100%, 0.4 ),
hsla( 0, 0%, 0%, 0.0 )
),
-moz-linear-gradient(
hsl( 130, 100%, 60% ),
hsl( 120, 80%, 60% )
)
;
Вот и всё на сегодня. Полагаю в следующий раз расскажу про свойство hsl. До новых встреч!
(голосов: 2, средний: 4.50 из 5)Похожие записи:
- Как сэкономить время! Заготовка для сайта “Стартовый набор”
- Сокращённые формы записи CSS
- Project Parfait от Adobe – незаменимый онлайн-инструмент верстальщика?
- "Как скрасить время ожидания пользователя" или "Предварительная загрузка страницы"
- Свойства CSS3! Часть 1. text-shadow: 15 способов применения, кроссбраузерность
Загрузка ...
13/04/2011 at 21:05 Постоянная ссылка Цитировать
спасибо за полезный материал!
А не могли бы Вы сделать его кросспост на rootfront.com? Либо мы сами могли бы его опубликовать и дать ссылку на Вас и Ваш блог.
Спасибо!
13/04/2011 at 23:53 Постоянная ссылка Цитировать
всегда пожалуйста!
Да, можете у себя кросспост сделать, со ссылкой сюда, конечно же. Буду только рад =)