Оформление кода CSS

19 января 2011 2 Рубрика: HTML&CSS

« Предыдущая запись
 		   Следующая запись »
 

css Оформление кода CSSВ связи с выходом CSS3 и усложнением его синтаксиса, могут возникать вопросы касательно оформления, а именно форматирования, кода CSS.

Прежде всего – для чего это необходимо. Основная мотивация – это помощь себе самому. Допустим вы написали код, но спустя пару месяцев, полгода, а то и года необходимо разобраться, что в нём к чему и внести правки. Если код оформлен доступно, то это облегчит жизнь не только вам, но и тому, кому, может быть, придётся работать с вашим кодом.

ВНИМАНИЕ! Если вы читаете запись в RSS, то вы, скорее всего, увидите некорректное оформление блоков кода. Поэтому крайне рекомендую читать запись непосредственно в блоге.

 

1. Отступы

Прежде, чем говорить о форматировании CSS3 правил, стоит сказать об общем оформлении кода, дабы кто им не пользуется. К примеру, возьмём следующий css-код:

#total {
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="total">
    <div id="total2">
        <div id="menu_top">меню</div>
    </div>
    <div id="lpanel">
        <a href="#" id="logo">&nbsp;</a>
        <div id="slogan">Слоган</div>
    </div>
</div>

Всё просто: общий контейнер, в котором вложены ещё два контейнера, в которых, в свою очередь, ещё пару контейнеров.

А теперь вернёмся к коду css. Как сделать, чтобы не глядя на html сразу стало понятно где кому своё место? Правильно, отформатировав по образу и подобию.

#total {
    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" (wiki). Использую его, обычно, с отступами в один tab или 3 пробела (реже 4).

 

2. Пробелы между значениями и скобками

А всё для того, чтобы проще читалось.

background: rgba( 0, 0, 255, 0.5 );
-webkit-transform: translateZ( -100px ) rotateY( 45deg );

Хотя, если честно, я бы опустил пробелы после скобки открывающей и перед скобкой закрывающей в первом примере. Правила тона хоть и гласят о том, что для глаза лучше чтобы они были, но лично меня они, при наличии аргументом через запятую, даже отвлекают. А во втором случае наоборот – они как-то гармонично входят. В общем, дело вкуса.

 

3. Пробелы для выравнивания схожих параметров в соседних строках

@-webkit-keyframes pulse { 
  0%  { background: red;   -webkit-transform: rotate(  0deg ); }
  33% { background: blue;  -webkit-transform: rotate( -5deg ); }
  67% { background: green; -webkit-transform: rotate(  5deg ); }
}

Так легче не только видеть, что, где и как, но и дебагить.

 

4. Лишние отступы для схожих параметров

        box-shadow: 1px 2px;
   -moz-box-shadow: 1px 2px;
-webkit-box-shadow: 1px 2px;

Полагаю ничего пояснять не надо. Всё для удобства.

5. Выравнивание в блоках

А теперь, собирая вышесказанное, оформление блока свойства с несколькими вложенными значениями.

background:
  -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. До новых встреч!

,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 2, средний: 4.50 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

  1. rootfront
    13/04/2011 at 21:05 Постоянная ссылка Цитировать

    спасибо за полезный материал!
    А не могли бы Вы сделать его кросспост на rootfront.com? Либо мы сами могли бы его опубликовать и дать ссылку на Вас и Ваш блог.
    Спасибо!

  2. Александр Шуйский
    13/04/2011 at 23:53 Постоянная ссылка Цитировать

    всегда пожалуйста!
    Да, можете у себя кросспост сделать, со ссылкой сюда, конечно же. Буду только рад =)