Заголовок

Стиль кода HTML Academy

При написании кода вам сложно будет запомнить все правила кодгайда. Эту работу стоит отдать роботам.

• Для поддержания единообразия в коде используйте EditorConfig.
• Для HTML используйте linthtml.
• Для стилей Stylelint.

По ссылкам находятся конфигурации Академии для этих инструментов. Конфигурации частично покрывают то, что описано в этом стиле кода, и в них нет ничего, что не описано ниже.

Код

Группировка файлов

• Файлы схожих типов группируются в папки: картинки, стили, скрипты, шрифты.
• Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.

 project/ pictures/ catalog/ wine.jpg cheese.png product/ wine-big.jpg cheese-big.png images/ logo.svg favicons/ 32x32.png 16x16.png content/ cat.jpg map.png scripts/ menu.js map.js styles/ styles.css catalog.html index.html project/ assets/ logo.svg icon-32x32.png icon-16x16.png menu.js map.js header.css footer.css index.css fonts.css index.html 

Форматирование кода

Код проекта соответствует параметрам EditorConfig:

root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf trim_trailing_whitespace = true insert_final_newline = true [*.] indent_size = 4 [*.md] trim_trailing_whitespace = false

HTML

Базовые части разметки

Минимальная обязательная структура HTML-документы состоит из:

• Современный тип документа
• Корневой элемент с языком документа lang
• Метаинформация
• Заголовок документа
• Кодировка документа . Кодировка символов на странице явно указана, чтобы обеспечить корректное отображение текста.
• Тело документа

Страница Страница

Регистр тегов и атрибутов

Имена тегов, атрибуты и их значения записаны строчными.

Исключение: атрибуты для SVG-элементов, например: viewBox , preserveAspectRatio и другие.

  
Первый
  
Второй
  
Третий


  
Первый
  
Второй
  
Третий

 

Форматирование тегов

• Вложенность тегов обозначается переносами и отступами.
• Каждый новый вложенный тег переносится на отдельную строку с отступом, кроме текстовых элементов.
• Текст внутри тегов остаётся на одной строке с тегами.

Двойные и одиночные теги

• Двойные теги имеют открывающий и закрывающий теги.
• Одиночные теги не имеют закрывающий тег или слэш.

  
Первый
  
Второй
  
Третий


  
Первый
  
Второй
  
Третий

 

Порядок атрибутов

• Атрибут class идёт сразу после имени тега.
• Атрибуты идут в одном порядке, чтобы упростить их чтение.

Логические атрибуты

Логические атрибуты записаны без значения и в единообразной последовательности во всём документе.

Форматирование атрибутов

В записи атрибутов нет пробелов вокруг знака «равно» = .

Кавычки в атрибутах и в значениях

• Значения атрибутов записаны в двойных кавычках.
• Вложенные кавычки в значениях являются одинарными.

Размеры замещаемых элементов

• У изображений, видео и iframe указаны размеры.
• По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
• В атрибутах нет единиц измерения.

Разделители в имени класса

Разделителями в имени класса являются только дефисы — и подчёркивания _ . В коде необходимо придерживаться одного стиля.

Атрибут method в форме

В атрибуте method указан тип отправки данных.

Подключение стилей

Стилевые файлы подключены с помощью внутри . При этом атрибут type для тега не указан, так как его значение text/css устанавливается по умолчанию.

Подключение скриптов

Скрипты подключены в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.

При подключении скриптов в теге атрибут type не указан, так как его значение text/javascript устанавливается по умолчанию.

Валидность

Документ проходит проверку на валидность. Для проверки используется современный валидатор.

CSS

Правило @import

Правило @import работает медленнее, чем тег . В стилях @import не использован.

Регистр селекторов и свойств

Селекторы и свойства записаны строчными буквами.

/* Хорошо */ .element < color: #ff0000; >/* Плохо */ .Element < Color: #ff0000; >.ELEMENT

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

• Перед открывающейся фигурной скобкой стоит пробел. После скобки запись идёт с новой строки.
• Свойства стоят на отдельных строках.
• Свойства внутри блока имеют один внутренний отступ.
• После двоеточия стоит пробел. Перед двоеточием пробел не нужен.
• В конце объявления стоит точка с запятой.
• Закрывающая скобка стоит на новой строке и без отступа.
• Между блоками правил есть одна пустая строка.

/* Хорошо */ .block < margin-bottom: 0; margin-top: 0; font-size: 14px; line-height: 20; color: #ff0000; >.element < background-color: #000000; >/* Плохо */ .block .element

Имена классов

• Имена классов записаны строчными буквами.
• Имена классов такие, что по ним можно быстро понять, какому элементу страницы задан класс. Избегайте сокращений, но не делайте их слишком длинными (более трёх слов).
• Для написания классов использованы английские слова и термины. В названиях классов и атрибутов нет транслита.

/* Хорошо */ .alert-danger < … >.tweet .user-picture < … >.button < … >.layout-center < … >/* Плохо */ .testElement < … >.t < … >.big_red_button < … >.knopka

Перенос селекторов

Селекторы, разделённые запятой, записаны на новых строках.

/* Хорошо */ h1, h2, h3 < margin-top: 0; >/* Плохо */ h1, h2, h3

Пробелы между комбинаторами

До и после комбинатора между селекторами стоит один пробел.

/* Хорошо */ h2 + h3 <> ul > li <> /* Плохо */ h2+h2 p<> ul >li <> 

Формат цветов

• Цвета записаны строчными в 6-значном формате HEX.
• Шестнадцатеричное значение цвета не сокращено, а записано полностью из всех шести символов. Для записи использованы строчные буквы.
• Цвета могут быть записаны функциями rgba или hsla , если нужна прозрачность.

/* Хорошо */ .block < background-color: #ff0000; border-left-color: #00ff00; color: rgba(0, 0, 0, 0.5); >/* Плохо */ .block

Кавычки

• Во всех случаях в стилях использованы двойные кавычки.
• В необязательных случаях кавычки не опущены.

/* Хорошо */ .field[type="text"] < background-image: url("images/cat.jpg"); >/* Плохо */ .field[type=text] < background-image: url(images/cat.jpg); >

Ведущий ноль и пробелы после запятых

/* Хорошо */ .block < opacity: 0.5; background-color: rgba(0, 0, 0, 0.5); >/* Плохо */ .block < opacity: .5; background-color: rgba(0, 0, 0, .5); >.element

Повторяющиеся свойства

• Свойства не повторяются в рамках одной декларации.
• Свойство может повторяться, если раньше описан сброс или общий случай.

/* Хорошо */ .block < margin: 0; margin-left: 20px; border: 10px solid #000000; border-bottom-color: #ff0000; >/* Плохо */ .block

Единицы измерения

• Единицы измерения не указаны там, где в них нет необходимости.
• В кастомных свойствах нужно указывать единицу измерения.

/* Хорошо */ :root < --size: 0px; >.element < border: 0; box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff; margin-top: 0; width: calc(100% - var(--size)); >/* Плохо */ :root < --size: 0; >.element

Дробные значения

В дробных значениях нет больше двух знаков после точки.

/* Хорошо */ .block < width: 2.33%; >/* Плохо */ .block

!important

• Ключевое слово !important не использовано для борьбы со специфичностью.
• Универсальные классы-хелперы могут использовать !important .

/* Хорошо */ .visually-hidden < position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; overflow: hidden !important; >/* Плохо */ .element

Доступное скрытие

Контент скрыт утилитарным классом visually-hidden , чтобы он был доступен для скринридеров и поисковиков.

Порядок свойств

Объявления логически связанных свойств сгруппированы в следующем порядке:

1. Позиционирование
2. Блочная модель
3. Типографика
4. Оформление
5. Анимация
6. Разное

Позиционирование следует первым, потому что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.

Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь.

Сгруппированные объявления в правиле отделены друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия.

Источник

Базовые стили и полезные CSS-сниппеты

В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

1. Базовая HTML5 конструкция

Основной код любой страницы, которому многие разработчики уделяют недостаточно внимания. Подключены jQuery 1.8.2 и HTML5shiv для корректного отображения в старых браузерах.

2. Сброс стандартных стилей браузеров

один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; >html < height: 101%; >/* always display scrollbars */ body < font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >strong < font-weight: bold; >input < outline: none; >table < border-collapse: collapse; border-spacing: 0; >img < border: 0; max-width: 100%; >a < text-decoration: none; >a:hover

3. CSS3 градиенты

Представленный ниже код поможет кроссбраузерно отображать CSS-градиенты. Добавляется в нужный селектор, можно использовать rgba() для прозрачности.

background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image: -o-linear-gradient(top, #bbb, #000); background-image: linear-gradient(top, #bbb, #000); 

4. CSS3 Transform

Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки или фигуры.

-webkit-transform: perspective(250) rotateX(45deg); -moz-transform: perspective(250) rotateX(45deg); -ms-transform: perspective(250) rotateX(45deg); -o-transform: perspective(250) rotateX(45deg); transform: perspective(250) rotateX(45deg); 

5. Свой @font-face

Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web.

6. Мета-теги адаптивной верстки

Важные мета-теги для корректной работы адаптивного макета

7. HTML5-медиа

Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента (убрать пробел в «s ource»)

8. Классы для упрощения верстки

Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных CSS-фреймворках. Например управление свойством float:

.float-left /* Or whatever name you like */ < float: left; >.float-right /* Or whatever name you like */

Или отображением элементов:

9. Сниппеты дизайна

Позволяют упрощать отображать контент. Простой пример: объявление в CSS-файле стилей шрифтов в зависимости от места на сайте, где располагается контент. Эта, вроде бы простая техника, часто игнорируется разработчиками.

10. Сниппеты разработки

Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:

Еще один полезный инструмент — это clearfix, помогающий избавиться от несоответствий отображения элементов верстки в разных браузерах:

.clearfix:before, .clearfix:after < content: " "; display: table; >.clearfix:after < clear: both; >/* IE6/7 support */ .clearfix

Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com), не работает в Opera и IE ниже восьмой версии:

Переносы текста в теге pre:

11. Подготовка страницы для печати

Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение URL рядом в скобках:

@media print < * < background: none !important; color: black !important; box-shadow: none !important; text-shadow: none !important; /* Images, vectors and such */ filter: Gray(); /* IE4-8: depreciated */ filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */ -webkit-filter: grayscale(100%); /* Chrome + Safari 6 */ -moz-filter: grayscale(100%); /* Future proof */ -ms-filter: grayscale(100%); /* Future proof */ -o-filter: grayscale(100%); /* Future proof */ filter: grayscale(100%); /* Future proof or polyfilled */ >a < text-decoration: underline; >a[href]:after < content: " (" attr(href) ")"; >a[href="#"], a[href="javascript:"] < content: ""; >> 

Источник