Требования к оформлению кода CSS
1. Кодировка файлов – UTF-8.
2. Разделители строк – UNIX (\n).
3. Каждое правило CSS пишется на новой строке с отступом в 1 Tab (1 Tab = 4 Пробела).
div {
color: #000000;
cursor: pointer;
}
4. Каждый селектор должен содержать только необходимое и достаточное число элементов.
5. Желательно использовать существующие обобщенные стили для описания однотипных элементов, если такие стили уже присутствуют в коде.
6. Желательно не дублировать свойства, наследуемые от родительских элементов, если в этом нет необходимости.
7. Желательно создавать спрайты вместо отдельных картинок.
8. Нескольких селекторов, имеющих однотипные правила оформления, желательно записывать на новой строке, перечисляя их через запятую.
a:link,
a:hover,
a:visited,
a:active {
color: #000000;
font-weight: bold;
}
9. Желательно располагать рядом CSS-код элементов, последовательно записанных в HTML-коде, с соблюдением порядка следования HTML-тэгов друг за другом.
10. Желательно выделять комментариями-заголовками крупные блоки CSS-правил, для группировки их по смыслу и отделения от остальных элементов.
/******** HEADER > ATTIC > SEARCH ********/
11. Обязательно необходимо оставлять пояснения рядом с хаками и закомментированными участками кода. Стоит помнить, что последовательность написания хаков для Internet Explorer имеет значение. Хаки необходимо записывать отдельно под блоком CSS-кода, требующего применения хаков.
/* Стандартный код CSS */
div {
margin-top: 5px;
}
/* Хак для Internet Explorer 7 */
div {
*margin-top: 2px;
}
/* Хак для Internet Explorer 6 */
div {
_margin-top: 2px;
}
/* Хак для Internet Explorer 8 */
@media \0screen {
div {
margin-top: 2px;
}
}
/* Хак для Internet Explorer 9 */
:root div {
margin-top: 2px \0/IE9 !important;
}
/* Хак для Internet Explorer 8 и 9 */
div {
margin-top: 2px \0/;
}
/* Хак для Internet Explorer 9 и 10 */
@media all and (min-width:0) {
div {
margin-top: 2px \0/;
}
}
/* Хак для Firefox */
@-moz-document url-prefix() {
div {
margin-top: 2px;
}
}
/* Хак для Chrome и Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
div {
margin-top: 2px;
}
}
/* Хак для Opera 9.5 */
*|html[xmlns*=""] div {
margin-top: 2px;
}
/* Хак для Opera выше 9.5 */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
div {
margin-top: 2px;
}
}
12. Обязательно все идентификаторы и классы должны иметь перед собой название тэга, к которому они привязаны.
div#identificator {
font-weight: bold;
}
div#identificator div.class {
cursor: pointer;
}
Исключение составляют классы, которые могут иметь общие для нескольких тэгов правила. Такие классы желательно помещать в отдельные группы.
.class {
color: #000000;
}
13. Желательно в начале CSS-файла размещать общие для всей страницы reset-правила, за ними располагать классы без тэгов для элементов имеющих общие черты в оформлении, после чего размещать код обобщенных стилей для элементов имеющих однотипный дизайн, затем располагать блоки кода для элементов имеющих на странице уникальный дизайн.
14. Желательно URL в background записывать без кавычек.
background-image: url(img/picture.gif);
15. Желательно соблюдать осмысленный порядок записи правил в столбик, группируя и располагая сходные правила рядом.
Пример:
height: 300px;
min-height: 100px;
max-height: 500px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
text-indent: 10px;
text-align: left;
text-transform: uppercase;
text-decoration: underline;
Порядок следования элементов в группе можно поменять на тот, который удобен вам в работе.
text-transform: uppercase;
text-decoration: underline;
text-align: left;
text-indent: 10px;
Пример того, как код может выглядеть при группировке всех правил:
tag {
display: block;
visibility: hidden;
overflow: auto;
overflow-x: auto;
overflow-y: auto;
position: absolute;
zoom: 1;
z-index: 100;
float: left;
clear: both;
width: 200px;
min-width: 100px;
max-width: 500px;
height: 300px;
min-height: 100px;
max-height: 500px;
clip: rect(40px, auto, auto, 40px);
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
margin: 0 10px 0 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
padding: 0 10px 0 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background: #ffffff url(img/picture.gif) 0px 0px no-repeat;
background-color: #789abc;
background-image: url(img/picture.gif);
background-repeat: no-repeat;
background-position: 0 10px;
background-attachment: scroll;
border: 1px solid #000000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-collapse: collapse;
border-spacing: 2px;
-webkit-box-shadow: 2px 2px 3px #969696;
-moz-box-shadow: 2px 2px 3px #969696;
box-shadow: 2px 2px 3px #969696;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
table-layout: fixed;
vertical-align: top;
font: Arial, Helvetica, sans-serif italic 10em;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
font-variant: normal;
font-stretch: normal;
font-size-adjust: 0.58;
line-height: 10px;
text-indent: 10px;
text-align: left;
text-transform: uppercase;
text-decoration: underline;
list-style: url(img/bullet.gif) inside;
list-style-image: url(img/bullet.gif);
list-style-type: circle;
list-style-position: inside;
word-spacing: normal;
white-space: nowrap;
color: #789abc;
cursor: pointer;
}
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
/* IE9, IE10 */
@media screen and (min-width:0\0) {
#veintidos { color: red}
}
The most common CSS hack to target Firefox is to put something like this in your stylesheet:
@-moz-document url-prefix() { h1 { color: red; } }
But if you’re using LESS.css, this is a problem, because LESS uses the ‘at’ symbol (@) for variables. When LESS parses the above declaration, since @-moz-document isn’t a variable, you get an error.
Thankfully there are other easy ways to target Firefox in CSS that allow us to continue using LESS. For instance:
body:not(:-moz-handler-blocked) #your-target-element {
color: red;
}
Комментариев нет:
Отправить комментарий