Независимо от того, сколько людей работает над одним проектом, убедитесь, что каждая строка кода выглядит так, как будто она была написана одним и тем же человеком.
1. Используйте два пробела вместо табуляции — это единственный способ обеспечить единообразное отображение во всех средах.
2. Вложенные элементы должны иметь один отступ (т.е. два пробела).
3. При определении атрибутов обязательно используйте двойные кавычки и никогда не используйте одинарные кавычки.
4. Не добавляйте косую черту к самозакрывающемуся элементу — в спецификации HTML5 четко указано, что это необязательно.
5. Не пропускайте необязательный закрывающий тег.
<!DOCTYPE html> <html> <голова> <title>Название страницы</title> </голова> <тело> <img src="images/company-logo.png" alt="Компания"> <h1 class="hello-world">Привет, мир!</h1> </тело> </html>
Добавьте объявление стандартного режима в первую строку каждой HTML-страницы, чтобы обеспечить единообразное представление в каждом браузере.
<!DOCTYPE html> <html> <голова> </голова> </html>
Согласно спецификации HTML5:
Настоятельно рекомендуется указать атрибут lang для корневого элемента html, чтобы установить правильный язык документа. Это поможет инструментам синтеза речи определить, какое произношение им следует использовать, поможет инструментам перевода определить правила, которым они должны следовать при переводе, и так далее.
<html lang="ru-ru"> <!-- ... --> </html>
IE поддерживает определенные теги для определения версии IE, которую следует использовать для рисования текущей страницы. Если нет особых особых потребностей, лучше всего установить пограничный режим, чтобы уведомить IE о необходимости перехода на последний поддерживаемый им режим.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Явно объявив кодировку символов, вы можете гарантировать, что браузер быстро и легко определит, как следует отображать содержимое страницы. Преимущество этого заключается в том, что вы можете избежать использования символьных объектов в HTML, чтобы все соответствовало кодировке документа (обычно кодировке UTF-8).
<голова> <мета-кодировка="UTF-8"> </голова>
Согласно спецификации HTML5, обычно нет необходимости указывать атрибут type при представлении файлов CSS и JavaScript, поскольку text/css и text/javascript являются их значениями по умолчанию соответственно.
<!-- Внешний CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- CSS в документе --> <стиль> /* ... */ </стиль> <!-- JavaScript --> <script src="code-guide.js"></script>
Старайтесь следовать стандартам и семантике HTML, но не жертвуйте практичностью. Старайтесь использовать как можно меньше тегов и всегда сводите сложность к минимуму.
Атрибуты HTML должны быть расположены в порядке, указанном ниже, чтобы обеспечить читаемость кода.
сорт
идентификатор, имя
данные-*
источник, для, тип, href, значение
заголовок, альтернативный вариант
роль, ария-*
Класс используется для идентификации компонентов, которые часто используются повторно, поэтому его следует указывать первым. Идентификатор используется для идентификации конкретного компонента, и его следует использовать с осторожностью (например, закладки на странице), поэтому он идет на втором месте.
Логические свойства могут быть объявлены без значения. Спецификация XHTML требует присвоения значения, а спецификация HTML5 этого не делает.
Для получения дополнительной информации обратитесь к разделу WhatWG о логических атрибутах:
Если логический атрибут элемента имеет значение, это правда, если он не имеет значения, это ложь.
Если вам необходимо присвоить ему значение, обратитесь к спецификации WhatWG:
Если атрибут существует, его значением должна быть пустая строка или […] каноническое имя атрибута без начальных или конечных пробелов.
Проще говоря, нет необходимости присваивать значение.
При написании HTML-кода старайтесь избегать избыточных родительских элементов. Во многих случаях для достижения этого требуются итерации и рефакторинг. Пожалуйста, ознакомьтесь со следующим случаем:
<!-- Не так уж и здорово --> <span class="аватар"> <img исходник="..."> </span> <!-- Лучше --> <img class="avatar" src="...">
Теги, созданные с помощью JavaScript, затрудняют поиск и редактирование контента и снижают производительность. Избегайте этого, когда можете.
1. Используйте два пробела вместо табуляции — это единственный способ обеспечить единообразное отображение во всех средах.
2. При группировке селекторов размещайте отдельные селекторы на отдельной строке.
3. Для удобства чтения кода добавьте пробел перед открывающей скобкой каждого блока объявлений.
4. Закрывающая фигурная скобка блока объявлений должна располагаться на отдельной строке.
5. После: в каждом операторе объявления следует вставить пробел.
6. Для более точного сообщения об ошибках каждый оператор должен располагаться на отдельной строке.
7. Все заявления-декларации должны заканчиваться точкой с запятой. Точка с запятой после последнего оператора объявления необязательна, но если вы ее опустите, ваш код может быть более подвержен ошибкам.
8. Для значений атрибутов, разделенных запятыми, после каждой запятой следует вставлять пробел (например, box-shadow).
9. Не вставляйте пробелы после запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect(). Это помогает отличить несколько значений цвета (только запятая, без пробелов) от нескольких значений атрибута (запятая и пробел).
10. Для значений атрибутов или параметров цвета опустите начальный 0 для десятичных знаков меньше 1 (например, .5 вместо 0,5; -.5px вместо -0,5px).
Все значения 11/Hex должны быть в нижнем регистре, например #fff. Символы нижнего регистра легче читать при сканировании документа, поскольку их форму легче различить.
12. Старайтесь использовать сокращенные шестнадцатеричные значения, например, используйте #fff вместо #ffffff.
13. Добавьте двойные кавычки для атрибутов в селекторе, например, input[type="text"]. Это необязательно в некоторых случаях, но для обеспечения единообразия кода рекомендуется использовать двойные кавычки.
14. Избегайте указания единиц измерения для нулевых значений, например, используйте «margin: 0» вместо «margin: 0px;».
/* Плохой CSS */
.selector, .selector-вторичный, .selector[type=text] {
отступ: 15 пикселей;
поле: 0 пикселей 0 пикселей 15 пикселей;
цвет фона:rgba(0, 0, 0, 0,5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Хороший CSS */
.селектор,
.селектор-вторичный,
.selector[type="text"] {
отступ: 15 пикселей;
нижнее поле: 15 пикселей;
цвет фона: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}Декларации о сопутствующем имуществе следует сгруппировать и расположить в следующем порядке:
Позиционирование
Коробчатая модель
Типографский
Визуальный
Позиционирование стоит на первом месте, поскольку оно удаляет элементы из обычного потока документов и может переопределить стили, связанные с блочной моделью. Коробчатая модель стоит на втором месте, поскольку она определяет размер и расположение компонентов.
Другие свойства влияют только на внутреннюю часть компонента или не влияют на первые две группы свойств, поэтому они располагаются позади.
.declaration-order {
/* Позиционирование */
позиция: абсолютная;
верх: 0;
правильно: 0;
внизу: 0;
слева: 0;
z-индекс: 100;
/* Бокс-модель */
дисплей: блок;
плавать: вправо;
ширина: 100 пикселей;
высота: 100 пикселей;
/* Типографика */
шрифт: обычный 13 пикселей «Helvetica Neue», без засечек;
высота строки: 1,5;
цвет: #333;
выравнивание текста: по центру;
/* Визуальный */
цвет фона: #f5f5f5;
граница: сплошная 1 пиксель #e5e5e5;
радиус границы: 3 пикселя;
/* Разное */
непрозрачность: 1;
}По сравнению с тегами директива @import работает значительно медленнее, что не только увеличивает количество дополнительных запросов, но и вызывает непредсказуемые проблемы. Альтернативы включают следующее:
Скомпилируйте несколько файлов CSS в один с помощью препроцессора CSS, аналогичного Sass или Less. Функции объединения файлов CSS предоставляются через Rails, Jekyll или другие системы.
<!-- Используйте элементы ссылки -->
<link rel="stylesheet" href="core.css">
<!-- Избегайте @imports -->
<стиль>
@import URL("more.css");
</стиль>Размещайте медиа-запросы как можно ближе к соответствующим правилам. Не объединяйте их в один файл стилей и не размещайте внизу документа. Если их разделить, то в будущем о них все просто забудут. Типичный пример приведен ниже.
.элемент { ... }
.element-аватар { ... }
.element-selected { ... }
@media (минимальная ширина: 480 пикселей) {
.элемент { ...}
.element-аватар { ... }
.element-selected { ... }
}Для стилей, содержащих только одно утверждение, рекомендуется размещать его на одной строке для удобства чтения и быстрого редактирования. Для стилей с несколькими объявлениями объявления все равно должны быть разделены на несколько строк.
Ключевым фактором при этом является обнаружение ошибок — например, валидатор CSS указывает на наличие синтаксической ошибки в строке 183. Если это один оператор в одной строке, вы не проигнорируете ошибку; если это несколько операторов в одной строке, вы должны тщательно проанализировать его, чтобы не пропустить ошибку;
/* Одиночные объявления в одной строке */
.span1 { ширина: 60 пикселей }
.span2 { ширина: 140 пикселей }
.span3 { ширина: 220 пикселей }
/* Несколько объявлений, по одному в строке */
.спрайт {
отображение: встроенный блок;
ширина: 16 пикселей;
высота: 15 пикселей;
фоновое изображение: URL(../img/sprite.png);
}
.icon {фоновая позиция: 0 0};
.icon-home {background-position: 0 -20px};
.icon-account {background-position: 0 -40px};В случаях, когда вам необходимо задать все значения явно, следует попытаться ограничить использование сокращенных объявлений свойств. К распространенным злоупотреблениям сокращенными декларациями об имуществе относятся следующие:
прокладка
допуск
шрифт
фон
граница
граница-радиус
В большинстве случаев нам не нужно указывать все значения для сокращенного объявления свойства. Например, элементу заголовка HTML необходимо установить только значения верхнего и нижнего полей, поэтому вам нужно переопределить эти два значения только при необходимости. Чрезмерное использование сокращенных объявлений свойств может привести к загромождению кода и вызвать непредвиденные побочные эффекты, вызывая ненужные переопределения значений свойств.
/* Плохой пример */
.element {
поле: 0 0 10 пикселей;
фон: красный;
фон: URL("image.jpg");
граница-радиус: 3px 3px 0 0;
}
/* Хороший пример */
.element {
нижнее поле: 10 пикселей;
цвет фона: красный;
фоновое изображение: URL("image.jpg");
граница-верхний левый радиус: 3 пикселя;
граница-верхний-правый-радиус: 3 пикселя;
}Избегайте ненужного вложения. Это связано с тем, что хотя вы и можете использовать вложение, это не значит, что вам следует это делать. Используйте вложение только тогда, когда стили должны быть ограничены родительским элементом (т. е. селекторами-потомками) и существует несколько элементов, которые необходимо вложить.
// Без вложенности
.table > thead > tr > th { &hellip }
.table > thead > tr > td { &hellip }
// С вложением
.table > head > tr {
> й { …
> тд { …
}Чтобы улучшить читаемость, добавьте пробел между значениями, переменными и операторами математических выражений, заключенными в круглые скобки.
// Плохой пример
.element {
поле: 10 пикселей 0 @variable*2 10 пикселей;
}
// Хороший пример
.element {
поле: 10 пикселей 0 (@variable * 2) 10 пикселей;
}Код пишут и поддерживают люди. Убедитесь, что ваш код самоописателен, хорошо прокомментирован и прост для понимания другими. Хорошие комментарии к коду передают контекст и цель кода. Не просто переформулируйте имена компонентов или классов.
Для более длинных комментариев обязательно пишите полные предложения; для общих комментариев можно писать краткие фразы.
/* Плохой пример */
/* Модальный заголовок */
.modal-header {
...
}
/* Хороший пример */
/* Элемент-обертка для .modal-title и .modal-close */
.modal-header {
...
} 1. В именах классов могут использоваться только строчные буквы и тире (не символы подчеркивания и верблюжий регистр). Тире следует использовать в именах связанных классов (аналогично пространствам имен) (например, .btn и .btn-danger).
2. Избегайте слишком произвольных сокращений. .btn представляет собой кнопку, но .s не может выражать никакого значения.
3.Имена классов должны быть как можно более короткими и иметь ясный смысл.
4. Используйте осмысленные имена. Используйте имена, которые организованы или целенаправленны, а не презентативны.
5. На основе ближайшего родительского класса или базового класса в качестве префикса нового класса.
6. Используйте классы .js-* для определения поведения (в отличие от стилей) и не включайте эти классы в файлы CSS.
/* Плохой пример */
.т { ... }
.красный { ... }
.header { ... }
/* Хороший пример */
.твит { ... }
.важный { ... }
.tweet-header { ... } Используйте классы для общих элементов, что поможет оптимизировать производительность рендеринга.
Для часто встречающихся компонентов избегайте использования селекторов атрибутов (например, [class^="…"]). Эти факторы могут влиять на производительность браузера.
Селектор должен быть как можно более коротким, и постарайтесь ограничить количество элементов, составляющих селектор. Рекомендуется не превышать 3.
Ограничивайте классы ближайшим родительским элементом (т. е. селектором-потомком) только в случае необходимости (например, если не используются классы с префиксами — префиксы подобны пространствам имен).
/* Плохой пример */
охватывать { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.аватар { ... }
/* Хороший пример */
.аватар { ... }
.tweet-header .username { ... }
.tweet .аватар { ... }Настройте свой редактор следующим образом, чтобы избежать распространенных несоответствий и различий в коде:
Используйте два пробела для замены символов табуляции (мягкая табуляция означает использование пробелов для обозначения символов табуляции). При сохранении файла удалите конечные пробелы. Установите кодировку файла UTF-8. Добавляет пустую строку в конец файла.
Обратитесь к документации и добавьте эту информацию о конфигурации в файл .editorconfig вашего проекта. Например: экземпляр .editorconfig в Bootstrap. Дополнительные сведения см. в разделе EditorConfig.