Вообще, эта статья является неким руководством по написанию грамотного HTML и CSS. Но явно не полноценным руководством сводом правил или БЭМ, который, кстати, является очень спорным моментом в мире фронт-энда. Но об этом потом.
\n\n\n\nТо, что вы прочитаете, скорее является сводом правил хорошего тона при вёрстке, которые сведут на минимум проблемы с пониманием и рендерингом вашей работы.
\n\n\n\n\n\n\n\nИспользуйте двойные пробелы — это единственный способ, который будет гарантировать то, что ваш код покажется и отрендерится одинаковым образом в любой среде разработки.
\n\n\n\nВложенные элементы должны иметь только одинарный отступ, то есть двойным пробелом.
\n\n\n\nНа атрибутах всегда используйте двойные кавычки, а не одинарные.
\n\n\n\nНе включайте закрывающий слеш в самозкрывающиеся элементы — HTML5 спецификация указывает на то, что они вообще опциональны, но мы то знаем.
\n\n\n\nНи в коем случае не пропускайте закрывающие теги (такие как </li> или </body>).
<!DOCTYPE html>\n<html>\n <head>\n <title>Заголовок страницы</title>\n </head>\n <body>\n <img src=\"images/company-logo.png\" alt=\"Company\">\n <h1 class=\"hello-world\">Привет, братиш!</h1>\n </body>\n</html>Чтобы работать в режиме стандартов и последовательного рендеринга элементов в каждом доступном браузере — добавляйте этот простой доктайп в начале каждой HTML страницы. Вообще, всегда старайтесь помнить про стандарты.
\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n </head>\n</html>Вырезка из спецификации HTML5:
\n\n\n\nРазработчикам рекомендуется указывать атрибут языка в начале html файла, тем самым указывая на принадлежность языка документа. Это способствует инструментам генерации голоса определить то, какое произношение использовать, а инструментам перевода определить каким правилам придерживаться и так далее.
\n\n\n\nВообще, прочитайте побольше об атрибуте lang в этой спецификации.
\n\n\n\nА вот, ссылка на Sitepoint со списком языковых кодов
\n\n\n\n<html lang=\"ru\">\n <!-- ... -->\n</html>Internet Explorer поддерживает тег использования совместимости <meta>, чтобы указывать то, под какую версию IE должна быть отрендерена страница. Да, пока что обстоятельства этого требуют и самый подходящий способ — это указать IE использовать последний поддерживаемый мод с edge mode.
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\">Легко и быстро делайте правильный рендеринг вашего контента, указывая точную кодировку вашим страницам. Так вы можете избежать использования мнемоников в HTML ( Это и т.п. В общем, дальше вы поняли), указывая их точную кодировку документу. В основном, самая ходовая кодировка это UTF-8.
<head>\n <meta charset=\"UTF-8\">\n</head>По спецификации HTML5, нет нужды в конкретном указании type при вставке CSS и JavaScript файлов, добавля как text/css так и text/javascript как страндартные указатели на типы подключаемых файлов. Теперь это лишнее.
Просто сделайте так:
\n\n\n\n<!-- Внешний CSS -->\n<link rel=\"stylesheet\" href=\"code-guide.css\">\n\n<!-- Внутренний CSS -->\n<style>\n /* ... */\n</style>\n\n<!-- JavaScript -->\n<script src=\"code-guide.js\"></script>Старайтесь поддерживать HTML стандарты и семантику, но не ценой практичности. Используйте как можно меньше разметки с наименее возможным количеством запутанных моментов и спорных вложений.
\n\n\n\nHTML атрибуты должны располагаться именно в таком порядке для облегчения чтения кода:
\n\n\n\nclass\nid, name\ndata-*\nsrc, for, type, href, value\ntitle, alt\nrole, aria-*Классы сделаны для удобного переиспользования компонентов, так что они идут первыми. ID это уже более специфичные вещи и относится к ним нужно довольно бережно, так что они идут вторыми.
<a class=\"...\" id=\"...\" data-toggle=\"modal\" href=\"#\">\n Example link\n</a>\n\n<input class=\"form-control\" type=\"text\">\n\n<img src=\"...\" alt=\"...\">p.s. тут используется слово булиные для простоты упоминания в тексте, который и так не очень простой. В общем, как в простом сленге разработки.
\n\n\n\nЭто атрибуты, которые нуждаются в необъявленном значении. Да, XHTML требует, чтобы вы объявляли их значение, но в HTML5 нет такого требования.
Для дальнейшего чтения, примите во внимание следующую WhatWG секцию по булиным атрибутам.
\n\n\n\n\n\n\n\nПрисутствие булиных атрибутов на элементе указывает на значение
true, а отсутствие атрибута указывает на значениеfalse.
Если вам необходимо присутствие атрибута, НО наличие его значения вам ненужно, то следуйте этому наставлению WhatWG:
\n\n\n\nЕсли атрибут есть, его значение должно быть либо пустой строкой, либо каноничным именем атрибута, без заглавного или замыкающего пробела.
\n\n\n\n<input type=\"text\" disabled>\n\n<input type=\"checkbox\" value=\"1\" checked>\n\n<select>\n <option value=\"1\" selected>1</option>\n</select>Где только возможно, избегайте излишних родительских элементов при написании HTML. Во многих случаях это приводит к повторениям и рефакторингу, но в итоге вы получаете меньше HTML. Вот хороший пример:
\n\n\n\n<!-- Отстой -->\n<span class=\"avatar\">\n <img src=\"...\">\n</span>\n\n<!-- Уже получше -->\n<img class=\"avatar\" src=\"...\">Создание разметки в JavaScript файле усложняет поиск контента, усложняет его редактирование и уменьшает скорость его рендеринга. Избегайте такого подхода всегда, когда это только возможно.
\n\n\n\nИспользуйте двойные пробелы, это единственный способ гарантировать то, что ваш код везде одинаково отрендерится и будет легко прочитан.
\n\n\n\nГруппируя селекторы, дайте каждому по строке.
\n\n\n\nВключайте один пробел перед открывающей скобкой блока, чтобы было понятнее.
\n\n\n\nСтавьте закрывающие скобки на новой строке.
\n\n\n\nДелайте один пробел после каждого :
Каждое объявление должно появляться на своей собственной строке для получения точного отчета об ошибках. В общем, чтобы видеть на какой строке был сбой.
\n\n\n\nЗаканчивайте каждое объявление точкой с запятой. В последнем объявлении это опционально, но в таком случае ваш код будет более склонен выдать ошибку в самых странных моментах при рендеринге.
\n\n\n\nСвойства, разделенные запятой, должны включать в себя пробел после каждой запятой. Например как в случае с box-shadow.
Не ставьте пробелы после запятых в значениях rgb(), rgba(), hsl(), hsla(), or rect(). Это поможет различать разные значения цвета(запятая, без пробела) от разных значений свойств (запятая с пробелом).
Не добавляйте ноль к свойствам значений или цветовым параметрам, то есть .5 вместо 0.5 и -.5px вместо -0.5px.
Все хекс значения пишите в нижнем регистре, то есть #fff. Буквы в нижнем регистре легче отличить, когда читаешь документ, так как у них больше уникальных очертаний.
Используйте сокращенные хекс значения, где это только возможно. Например, #fff вместо #ffffff.
Заключайте в скобки значения атрибутов в селекторах. Например, input[type=”text”]. Хоть это и опционально, но это хорошая практика в плане логичности.
Избегайте указывания единиц измерения для нулевых значений. Например, margin: 0, вместо margin: 0px.
/* Плохой CSS */\n.selector, .selector-secondary, .selector[type=text] {\n padding:15px;\n margin:0px 0px 15px;\n background-color:rgba(0, 0, 0, 0.5);\n box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF\n}\n\n/* Хороший CSS */\n.selector,\n.selector-secondary,\n.selector[type=\"text\"] {\n padding: 15px;\n margin-bottom: 15px;\n background-color: rgba(0,0,0,.5);\n box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;\n}Следующие объявления, должны группироваться в таком порядке:
\n\n\n\nПозиционирование
\n\n\n\nBox model
\n\n\n\nТипография
\n\n\n\nВизуализация
\n\n\n\nГлавное — позиционирование идет первым, так как оно может удалить элемент с потока документа и переопределить относительные стили для box-модели, которая идет следующей, так как указывает размещение и размеры элемента.
\n\n\n\nВсё остальное, что внутри компонента или не влияет на предыдущие две секции, идет последним:
\n\n\n\n.declaration-order {\n /* Позиционирование */\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 100;\n\n /* Box-model */\n display: block;\n float: right;\n width: 100px;\n height: 100px;\n\n /* Типография */\n font: normal 13px \"Helvetica Neue\", sans-serif;\n line-height: 1.5;\n color: #333;\n text-align: center;\n\n /* Визаулизация */\n background-color: #f5f5f5;\n border: 1px solid #e5e5e5;\n border-radius: 3px;\n\n /* Всякое */\n opacity: 1;\n}В сравнении с <link>, @import медленнее, добавляет несколько дополнительных запросов странице и может вызывать другие непредвиденные проблемы. Избегайте его применение и делайте уклон на другие решения:
Используйте несколько <link> элементов
Компилируйте свой CSS с препроцессором, таким как Sass, в один файл.
\n\n\n\nСливайте вместе ваши CSS файлы с функционалом, предоставленным в Rails, Jekyll и других.
\n\n\n\n<!-- Используйте link -->\n<link rel=\"stylesheet\" href=\"core.css\">\n\n<!-- Избегайте @imports -->\n<style>\n @import url(\"more.css\");\n</style>Размещайте медиа запросы как можно ближе к своим релевантным наборам правил. Не связывайте их через разные таблицы стилей или под конец документа. Делая так, вы только усложните работу с ними в будущем, не говоря уже о том треше, с которым придется столкнуться тому, кто потом будет работать с вашим кодом. Вот обычная хорошая разметка с медиа-запросами:
\n\n\n\n.element { ... }\n.element-avatar { ... }\n.element-selected { ... }\n\n@media (min-width: 480px) {\n .element { ...}\n .element-avatar { ... }\n .element-selected { ... }\n}Используя вендорные свойства префиксов, делайте отступ каждому свойству так, будто это объявление нового свойства, то есть в линию, для того, чтобы облегчить мультистрочное редактирование.
\n\n\n\nВ Textmate, используйте Text → Edit Each Line in Selection (⌃⌘A). В Sublime Text 2, используйте Selection → Add Previous Line (⌃⇧↑) и Selection → Add Next Line (⌃⇧↓).
\n\n\n\n/* Свойства с префиксами */\n.selector {\n -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);\n box-shadow: 0 1px 2px rgba(0,0,0,.15);\n}В примерах, где набор правил включает только одно указание стиля, рассмотрите вариант с удалением переноса строк, для улучшения читабельности и быстроты редактирования. Каждый набор правил с несколькими декларациями должен разделяться на разные строки.
\n\n\n\nКлючевой фактор тут, это обнаружение ошибок — то есть CSS валидатор подмечает то, что у вас есть синтаксическая ошибка на 183 строке. С одиночной декларацией, вы её не пропустите. В множественном объявлении стилей, разные строки обязательны для сохранения здравого смысла.
\n\n\n\n/* Одиночное объявление стиля */\n.span1 { width: 60px; }\n.span2 { width: 140px; }\n.span3 { width: 220px; }\n\n/* Множественное объявление, по стилю на строку */\n.sprite {\n display: inline-block;\n width: 16px;\n height: 15px;\n background-image: url(../img/sprite.png);\n}\n.icon { background-position: 0 0; }\n.icon-home { background-position: 0 -20px; }\n.icon-account { background-position: 0 -40px; }Ограничивайте себя в использовании условных сокращений, в тех примерах, где вам надо выставлять все доступные значения. По обыкновению, злоупотребляют сокращениями следующих свойств:
\n\n\n\npadding
\n\n\n\nmargin
\n\n\n\nfont
\n\n\n\nbackground
\n\n\n\nborder
\n\n\n\nborder-radius
\n\n\n\nЗачастую, нам просто не нужно выставлять все значения в условных сокращениях. Для примера, HTML заголовки выставляют только верхний и нижний margin, так что когда необходимо, переписывайте только два этих значения. Чрезмерное использование сокращений зачастую ведет к медленному рендеренгу кода, с ненужными перезаписями и непреднамеренными побочными эффектами.
\n\n\n\n/* Плохой пример */\n.element {\n margin: 0 0 10px;\n background: red;\n background: url(\"image.jpg\");\n border-radius: 3px 3px 0 0;\n}\n\n/* Хороший пример */\n.element {\n margin-bottom: 10px;\n background-color: red;\n background-image: url(\"image.jpg\");\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n}Под страхом расстрела избегайте ненужных вложений в препроцессорах. Просто если вы можете это делать, то это не означает того, что вам всегда надо это делать. Рассматривайте использование вложений только в тех случаях, если вам надо масштабировать стили по родителю и если есть несколько элементов для вложения.
\n\n\n\n// Без вложения\n.table > thead > tr > th { … }\n.table > thead > tr > td { … }\n\n// С вложением\n.table > thead > tr {\n > th { … }\n > td { … }\n}Для улучшения читабельности, заключайте математические операции в скобки с пробелом между значениями, переменными и операторами.
\n\n\n\n// Плохой пример\n.element {\n margin: 10px 0 @variable*2 10px;\n}\n\n// Хороший пример\n.element {\n margin: 10px 0 (@variable * 2) 10px;\n}Помните, что код пишется и поддерживается людьми. Убедитесь, что ваш код достаточно описателен, хорошо прокомментирован и доступен для понимания другими. Создавайте комменты в коде, передающие контекст и своё конкретное предназначение. А не просто повторяющие компонент или имя класса.
\n\n\n\nУбеждайтесь в том, что вы пишите полные предложения для больших комментариев и сжатые фразы для заглавных записей.
\n\n\n\n/* Плохой пример */\n/* Modal header */\n.modal-header {\n ...\n}\n\n/* Good example */\n/* Wrapping element for .modal-title and .modal-close */\n.modal-header {\n ...\n}Пишите классы в нижнем регистре и используйте тире, а не нижние подчеркивания или горбатый регистр. Тире служит как естественный пробел в связанных классах. (.btn и .btn-danger).
Избегайте чрезмерных или слишком коротких, спорных определений названий. .btn очень полезно для кнопок, но .s не означает ровным счетом ничего.
Классы должны быть как можно короче и более сжатыми, на сколько это возможно.
\n\n\n\nИспользуйте имена со смыслом, предпочитайте структурные или целесообразные имена, взамен презентативных.
\n\n\n\nДобавляйте классам префикс, основываясь на их ближайшем родителе или основном классе.
\n\n\n\nИспользуйте .js-* классы для обозначения поведения, но держите эти классы подальше от вашего CSS.
Также, очень полезно применять эти правила при раздаче имен переменным в Sass и Less.
\n\n\n\n/* Плохой пример */\n.t { ... }\n.red { ... }\n.header { ... }\n\n/* Хороший пример */\n.tweet { ... }\n.important { ... }\n.tweet-header { ... }Обязательно обратите внимание на эту статью — Прокачиваем навыки работы с CSS селекторами
\n\n\n\nИспользуйте классы вместо обычных тегов элементов для оптимального рендеринга.
\n\n\n\nИзбегайте исползования нескольких селекторов атрибутов, например [class^=\"…\"], на часто встречающихся компонентах. Известно, что производительность браузера страдает из-за этого.
Сохраняйте селекторы краткими и ограничивайте количество элементов в каждом селекторе до трех.
\n\n\n\nМасштабируйте классы до ближайшего родителя, только тогда, когда нужно. Когда не используются префиксные классы.
\n\n\n\n/* Плохой пример */\nspan { ... }\n.page-container #stream .stream-item .tweet .tweet-header .username { ... }\n.avatar { ... }\n\n/* Хороший пример */\n.avatar { ... }\n.tweet-header .username { ... }\n.tweet .avatar { ... }Организуйте секции кода по компонентам.
\n\n\n\nСоздавайте последовательную иерархию комментирования.
\n\n\n\nИспользуйте последовательные пробелы при разделении секций кода, чтобы потом вам было легче читать большие документы.
\n\n\n\nИспользуя несколько CSS файлов, разделяйте их по компонентам, а не по страницам. Страницы могут быть перераспределены, а компоненты смещены.
\n\n\n\n/*\n * Начало секции компонента\n */\n\n.element { ... }\n\n\n/*\n * Начало секции компонента\n *\n * Иногда вам надо добавлять дополнительный контекст для целого компонента. Делайте это как описано ниже, при необходимости.\n */\n\n.element { ... }\n\n/* Связанный саб-компонент или модификатор стиля */\n.element-heading { ... }Выставите вашему редактору следующие настройки, чтобы избежать распространенные несоответствия в коде и странные различия:
\n\n\n\nИспользуйте двойной пробел.
\n\n\n\nОбрезайте болтающиеся(лишние) пробелы при сохранении.
\n\n\n\nВыставляйте кодировку на UTF-8.
Добавляйте новые строки с конца.
\n\n\n\nРассмотрите документирование и применение этих свойств в вашем проекте в .editorconfig файле. Для примера, вот один для Bootstrap. Вот больше про EditorConfig.
Вообще, эта статья является неким руководством по написанию грамотного HTML и CSS. Но явно не полноценным руководством сводом правил или БЭМ, который, кстати, является очень спорным моментом в мире фронт-энда.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/standartynaposankjnfk.jpg"},"interesting":[{"title":"Зачем использовать правило @supports","slug":"zachem-ispolzovat-pravilo-supports","type":"html-css"},{"title":"Размеры шрифтов CSS. Пиксели vs Em vs Rem vs Проценты vs Viewport единицы","slug":"razmery-shriftov-css-pikseli-vs-em-vs-rem-procenti-vs-viewport-edinitsy","type":"html-css"},{"title":"Более доступная разметка с display: contents","slug":"bolee-dosutpnaya-razmetka-s-display-contents","type":"html-css"}]}},"staticQueryHashes":["3576131997","63159454"]}