Стандарты для разработки гибкого, надежного и поддерживаемого кода на HTML и CSS.
19 |Соблюдайте предложенные здесь соглашения. Если вы нашли ошибку, сообщите об этом. Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, пожалуйста, создайте issue на GitHub.
85 |88 |90 |Вне зависимости от количества разработчиков, код в любом проекте должен быть написан так, словно его писал один человек.
89 |
a, span, small, strong, em, i, kbd, code) допустимо не переносить на новые строки./) в конец одиночного тега.</li> или </body>).113 |122 |<nav class="main-nav">114 |<ul>115 |<li><a href="/index.html">Главная</a></li>116 |<li><a href="/contacts.html">Контакты</a></li>117 |</ul>118 |</nav>119 |<br>120 |<img src="logo.svg" width="50" height="50" alt="Company">121 |
<!DOCTYPE html>lang для <html><head> указывайте кодировку (обычно UTF-8)136 |148 |<!DOCTYPE html>137 |<html lang="ru">138 |<head>139 |<meta charset="UTF-8">140 |<title>Заголовок страницы</title>141 |</head>142 |<body>143 |<img src="logo.svg" width="50" height="50" alt="Company">144 |<h1>Привет, мир!</h1>145 |</body>146 |</html>147 |
При подключении CSS и JavaScript файлов не указывайте атрибут type (text/css для стилей и text/javascript для скриптов являются значениями по умолчанию).
CSS-файлы подключайте в <head>, JavaScript-файлы — перед </body>
159 |165 |<!-- Внешний CSS -->160 |<link rel="stylesheet" href="style.css">161 |162 |<!-- Внешний JavaScript -->163 |<script src="script.js"></script>164 |
Очередность атрибутов должна быть единообразной.
172 |Указывайте атрибуты data-*, aria-*, role и логические атрибуты последними.
176 |182 |<a class="btn" href="#modal-call-me" data-modal="toggle">Перезвоните</a>177 |178 |<input type="text" class="field-text" disabled>179 |180 |<img src="logo.svg" width="50" height="50" alt="Company">181 |
<img> должны быть указаны размеры (без единиц измерения, то есть, в пикселях).197 |210 |<header class="page-header">198 |<a href="/" class="logo">199 |<img src="logo.svg" width="50" height="50" alt="Company">200 |</a>201 |...202 |<a href="/login" class="login">Войти</a>203 |<!-- <a href="/logout" class="login">Выйти</a> -->204 |</header>205 |206 |<section class="catalog">207 |...208 |</section>209 |
.foo > .bar).: для каждого объявления. Не ставьте пробел перед двоеточием.box-shadow).rgb(), rgba(), hsl(), hsla(), или rect().0.5 вместо .5).#fff вместо #FFF).#fff вместо #ffffff).input[type="text"]).margin: 0; вместо margin: 0px;).245 |263 |/* Хороший CSS */246 |.selector > .some,247 |.selector-secondary {248 |padding: 15px;249 |margin-bottom: 15px;250 |line-height: 1;251 |background-color: rgba(0,0,0,0.5);252 |box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;253 |}254 |255 |/* Плохой CSS */256 |.selector>.some ,.selector-secondary{257 |padding:15px;258 |margin:0 0px 15px;259 |line-height :1em;260 |background-color: rgba(0, 0, 0, .5);261 |box-shadow:0 1px 2px #ccc,inset 0 1px 0 #FFF;}262 |
- в местах разделения слов (не используйте как разделитель слов один символ нижнего подчеркивания, не используйте camelCase)..js-* для работы с JavaScript. Такие классы должны отсутствовать в CSS.Используйте БЭМ-именование, если знакомы с этой методологией.
281 |284 |299 |/* Хорошие селекторы */285 |.page-header { ... }286 |.comment { ... }287 |.sidebar { ... }288 |.gallery { ... }289 |.gallery__item { ... }290 |291 |/* Плохие селекторы */292 |.t { ... }293 |.root span a { ... }294 |.red { ... }295 |.my_block { ... }296 |.HeaderOfMyBlock { ... }297 |.eto-moy-perviy-klass { ... }298 |
Объявления логически связанных свойств должны быть сгруппированы в следующем порядке:
306 |Позиционирование может удалить элемент из нормального потока документа и переопределить блочную модель связанных стилей, поэтому указывайте его первым. Блочная модель диктует размеры и расположение компонента, пишите ее второй.
315 |В примере кода группы правил разделены пустыми строками. Делать такие разделители не обязательно.
316 |319 |344 |.selector {320 |position: absolute;321 |top: 0;322 |right: 0;323 |bottom: 0;324 |left: 0;325 |z-index: 100;326 |327 |display: block;328 |float: right;329 |width: 100px;330 |height: 100px;331 |332 |font: 13px/1.5 "Helvetica Neue", sans-serif;333 |color: #333;334 |text-align: center;335 |336 |background-color: #f5f5f5;337 |border: 1px solid #e5e5e5;338 |border-radius: 3px;339 |opacity: 1;340 |341 |transition: all 0.3s;342 |}343 |
Оставляте пустую строку перед селектором или группой селекторов.
351 |Работая с CSS-препроцессорами, оставляйте пустую строку перед любым вложенным селектором и @media.
355 |369 |/* В CSS-файле: */356 |.promo {...}357 |358 |.gallery {...}359 |360 |/* В препроцессорном файле: */361 |.promo {362 |display: block;363 |364 |&__container {...}365 |366 |&__item {...}367 |}368 |
Избегайте сокращенных объявлений. К примеру, если нужно задать только нижний внешний отступ, пишите margin-bottom: 10px; вместо margin: 0 0 10px;
379 |396 |/* Хорошо */380 |.element {381 |margin-bottom: 10px;382 |background-color: red;383 |background-image: url("image.jpg");384 |border-top-left-radius: 3px;385 |border-top-right-radius: 3px;386 |}387 |388 |/* Плохо */389 |.element {390 |margin: 0 0 10px;391 |background: red;392 |background: url("image.jpg");393 |border-radius: 3px 3px 0 0;394 |}395 |
@importПо сравнению с тегом <link> правило @import работает медленнее и может вызвать иные непредвиденные проблемы. Не используйте @import, используйте альтернативные подходы:
<link>411 |419 |<!-- Используйте тег link -->412 |<link rel="stylesheet" href="style.css">413 |414 |<!-- Не используйте @imports -->415 |<style>416 |@import url("more-styles.css"); /* Плохо! Не надо так! */417 |</style>418 |
@mediaПомещайте media queries настолько близко к соответствующим наборам правил, насколько это возможно. Не объединяйте их в отдельную таблицу стилей, не помещайте их в конце файла.
426 |Ставьте пробелы вокруг полукруглых скобок.
427 |Ставьте пробел перед указанием значения в условии.
428 |431 |451 |/* В CSS-файле (без препроцессоров): */432 |.element {433 |display: block;434 |}435 |436 |@media (min-width: 480px) {437 |.element {438 |display: none;439 |}440 |}441 |442 |/* В препроцессорном файле: */443 |.element {444 |display: block;445 |446 |@media (min-width: $screen-sm) {447 |display: none;448 |}449 |}450 |
Оставляйте отступы для каждого свойства так, чтобы значения выстраивались в вертикальную линию.
458 |Не пишите свойства с вендорными префиксами вручную. Используете Autoprefixer в рамках автоматизации или его он-лайн сервис.
459 |462 |467 |.selector {463 |-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);464 |box-shadow: 0 1px 2px rgba(0,0,0,0.15);465 |}466 |