Оформление файла стилей разметки

     О том, как именовать классы и идентификаторы мнение у каждого свое. Все мнения сходятся в одном: имя должно нести какую-то информацию.

     Макет страницы обычно состоит из подобных элементов: блоков div, форм, кнопок, ссылок.

• Оптимальней всего задать всем повторяющимся элементам один и тот же класс. В этом случае код укорачивается. А его длина влияет на скорость загрузки сайта. То есть, применение унификации в стилях обеспечит во-первых — единый стиль и во-вторых — код небольшого объема.

Это не так просто, как кажется. Часто бывает, общий стиль в чем-то не подходит элементу. Все же унификация помогает.

• Записывая имена классов и идентификаторов в алфавитном порядке, я получила удобный для работы код. Легко находится определенный класс или идентификатор.

Рекомендации от Google (вольный пересказ)

Имена классов и идентификаторов

     Конечно, можно дать идентификаторам имена типа 1,2,3 или a,b.c. Но вот вопрос: когда разметка не будет изменяться довольно долгое время, сколько придется изыскивать обозначение идентификаторов, если вдруг понадобится правка?

Например, назвав идентификатор шапки #header, а не #a, в дальнейшем будет намного легче понять, к чему он относится.

Длина имен

    Нужно стараться давать имена такой длины, которой достаточно для понимания.

Сокращенные формы записи

     Правила css предлагают различные сокращенные формы записи. По возможности, их нужно использовать. Например, font: 100%/1.6 palatino, georgia, serif;

0 и единицы измерений

     Не нужно указывать единицы для значения 0. 0 — он везде 0. так что в этом нет необходимости.

Обозначения цветов

     Рекомендуется использовать шестнадцатеричную форму записи, например, черный #000000 или, в сокращенной форме, #000.

Разделитель в классе или идентификаторе

     Старайтесь использовать дефис, а не знак подчеркивания, например, #first-line, а не #first_line.

Порядок объявлений

     На мой взгляд — очень хорошая рекомендация. Google советует упорядочивать запись объявлений по алфавиту. Например,

background: fuchsia;

 border:1pxsolid;

 -moz-border-radius:4px;

 -webkit-border-radius:4px;

 border-radius:4px;

 color:black;

 text-align:center;

 text-indent:2em;

При сортировке игнорируйте браузерные префиксы. При этом, если для одного свойства используются несколько браузерных префиксов, они также должны быть отсортированы (например -moz должен быть перед --webkit).

После объявления

     Обязательно ставьте знак «точка с запятой». Например,

border-radius: 4px;

color:black;

text-align: center;

Селектор или объявление

     Начинайте каждый селектор или объявление с новой строки. Например,

h1,

h2,

h3{ font-weight:normal;

 line-height:1.2; }

     Если стараться придерживаться этих правил, файл стилей становится удобочитаем и даже красив.

2017-04-04

 Вперед ►