Skip to content

Instantly share code, notes, and snippets.

@zoxon

zoxon/html-css-rules.md

Last active October 28, 2025 16:37
Show Gist options
  • Save zoxon/30000e56a0d96af6de26836bf0df976c to your computer and use it in GitHub Desktop.
Save zoxon/30000e56a0d96af6de26836bf0df976c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zoxon revised this gist Jul 12, 2016. 1 changed file with 17 additions and 17 deletions.
    34 changes: 17 additions & 17 deletions html-css-rules.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,33 +4,33 @@

    1. Форматировать код;
    2. Использовать HTML5 теги;
    3. Семантически называть значения у атрибутов(class, name и т.п);
    4. Запрещается транслит(.hapka, .tovar). Можно заменить на .header, .product;
    5. Запрещается сокращать селекторы(.cb, .acc). Можно заменить на .checkbox, .accordion;
    3. Семантически называть значения у атрибутов(`class`, `name` и т.п);
    4. Запрещается транслит(`.hapka`, `.tovar`). Можно заменить на `.header`, `.product`;
    5. Запрещается сокращать селекторы(`.cb`, `.acc`). Можно заменить на `.checkbox`, `.accordion`;
    6. Не допускается вложение блочного элемента в строчный. Например, тега заголовка(h1-h6) в ссылку;
    7. Использовать теги согласно спецификации. Например, < div class=”title” >Заголовок 3 уровня< /div > нужно заменить на < h3 class=”title” >Заголовок 3 уровня< /h3 >;
    8. Теги article, section обязательно должны иметь заголовки(h1-h6);
    9. Тег nav должен содержать ссылки только на разделы сайта или разделы внутри одной страницы. Например, верстка пагинации с помощью nav будет являться ошибкой;
    10. Для тегов input указывать атрибут name;
    11. Использовать современные type для тега input;
    12. Декоративные элементы (иконки, фоновые изображения) верстать при помощи CSS. Тег img использовать для верстки изображений в контенте с обязательным атрибутом alt;
    13. Запрещается явно указывать внешние параметры в названии селектора. Например, < a href=”#” class=”link-green” >. Можно заменить на < a href=”#” class=”link link-green” >. В классе link указать основные свойства для ссылки. Например, размер шрифта. А класс link-green использовать для верстки “зеленых” ссылок. Таким образом, в будущем мы уберем конфликты между свойствами;
    7. Использовать теги согласно спецификации. Например, `<div class="title">Заголовок 3 уровня</div>` нужно заменить на `<h3 class="title">Заголовок 3 уровня</h3>`;
    8. Теги `article`, `section` обязательно должны иметь заголовки(h1-h6);
    9. Тег nav должен содержать ссылки только на разделы сайта или разделы внутри одной страницы. Например, верстка пагинации с помощью `nav` будет являться ошибкой;
    10. Для тегов `input` указывать атрибут `name`;
    11. Использовать современные значения `type` для тега `input`;
    12. Декоративные элементы (иконки, фоновые изображения) верстать при помощи CSS. Тег `img` использовать для верстки изображений в контенте с обязательным атрибутом `alt`;
    13. Запрещается явно указывать внешние параметры в названии селектора. Например, `<a href="#" class="link-green">`. Можно заменить на `<a href="#" class="link link-green">`. В классе `link` указать основные свойства для ссылки. Например, размер шрифта. А класс `link-green` использовать для верстки «зеленых» ссылок. Таким образом, в будущем мы уберем конфликты между свойствами;
    14. Проверять верстку через [W3C validator](https://validator.w3.org/nu/);
    15. Верстка не должна "валиться" при добавлении и удалении блоков, при добавлении большого контента;
    15. Верстка не должна «валиться» при добавлении и удалении блоков, при добавлении большого контента;
    16. Блоки должны свободно перемещаться по странице или дублироваться на других;
    17. Тестировать верстку;
    18. Проверять верстку на случай ошибки при загрузке CSS и картинок;
    19. Рекомендуется придерживаться компонентного подхода. Для примера - БЭМ. Но БЭМ это не догма.
    19. Рекомендуется придерживаться компонентного подхода. Для примера - [БЭМ](https://ru.bem.info/). Но БЭМ это не догма.

    ## CSS

    1. Порядок каскадов должен соответствовать порядку тегов в HTML;
    2. Разделять стили на несколько слоев. Например, первый слой - сброс стилей и установка стилей для основных элементов (ссылки, параграфы, заголовки и т.д). Второй слой - это элементы для каркаса сайта (шапка, сайдбары, контент, подвал). Третий слой - это компоненты страницы (меню, карточка товара и т.д);
    3. Устанавливать базовый шрифт в селекторе body {};
    4. Запрещается использовать индификатор(id) в качестве селектора. Рекомендуется использовать селекторы классов. За исключением установки свойств для основных элементов(ссылки, списки, параграфы и.т.п);
    5. Вложенность селектора не должна превышать два простых селектора. Например, не рекомендуется делать такие селекторы - .menu .menu-list a;
    3. Устанавливать базовый шрифт в селекторе `body {}`;
    4. Запрещается использовать индификатор(`id`) в качестве селектора. Рекомендуется использовать селекторы классов. За исключением установки свойств для основных элементов(ссылки, списки, параграфы и.т.п);
    5. Вложенность селектора не должна превышать два простых селектора. Например, не рекомендуется делать такие селекторы - `.menu .menu-list a`;
    6. Комментировать основные блоки;
    7. Устанавливать свойства для :focus, :active;
    8. Запрещается использовать !important.
    7. Устанавливать свойства для `:focus`, `:active`, `:visited`;
    8. Запрещается использовать `!important`.

    *Самое главное правило - думать головой! :)*
  2. zoxon revised this gist Jul 12, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-css-rules.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@
    11. Использовать современные type для тега input;
    12. Декоративные элементы (иконки, фоновые изображения) верстать при помощи CSS. Тег img использовать для верстки изображений в контенте с обязательным атрибутом alt;
    13. Запрещается явно указывать внешние параметры в названии селектора. Например, < a href=”#” class=”link-green” >. Можно заменить на < a href=”#” class=”link link-green” >. В классе link указать основные свойства для ссылки. Например, размер шрифта. А класс link-green использовать для верстки “зеленых” ссылок. Таким образом, в будущем мы уберем конфликты между свойствами;
    14. Проверять верстку через W3C validator;
    14. Проверять верстку через [W3C validator](https://validator.w3.org/nu/);
    15. Верстка не должна "валиться" при добавлении и удалении блоков, при добавлении большого контента;
    16. Блоки должны свободно перемещаться по странице или дублироваться на других;
    17. Тестировать верстку;
  3. zoxon created this gist Jul 12, 2016.
    36 changes: 36 additions & 0 deletions html-css-rules.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    # Требования к верстке

    ## HTML

    1. Форматировать код;
    2. Использовать HTML5 теги;
    3. Семантически называть значения у атрибутов(class, name и т.п);
    4. Запрещается транслит(.hapka, .tovar). Можно заменить на .header, .product;
    5. Запрещается сокращать селекторы(.cb, .acc). Можно заменить на .checkbox, .accordion;
    6. Не допускается вложение блочного элемента в строчный. Например, тега заголовка(h1-h6) в ссылку;
    7. Использовать теги согласно спецификации. Например, < div class=”title” >Заголовок 3 уровня< /div > нужно заменить на < h3 class=”title” >Заголовок 3 уровня< /h3 >;
    8. Теги article, section обязательно должны иметь заголовки(h1-h6);
    9. Тег nav должен содержать ссылки только на разделы сайта или разделы внутри одной страницы. Например, верстка пагинации с помощью nav будет являться ошибкой;
    10. Для тегов input указывать атрибут name;
    11. Использовать современные type для тега input;
    12. Декоративные элементы (иконки, фоновые изображения) верстать при помощи CSS. Тег img использовать для верстки изображений в контенте с обязательным атрибутом alt;
    13. Запрещается явно указывать внешние параметры в названии селектора. Например, < a href=”#” class=”link-green” >. Можно заменить на < a href=”#” class=”link link-green” >. В классе link указать основные свойства для ссылки. Например, размер шрифта. А класс link-green использовать для верстки “зеленых” ссылок. Таким образом, в будущем мы уберем конфликты между свойствами;
    14. Проверять верстку через W3C validator;
    15. Верстка не должна "валиться" при добавлении и удалении блоков, при добавлении большого контента;
    16. Блоки должны свободно перемещаться по странице или дублироваться на других;
    17. Тестировать верстку;
    18. Проверять верстку на случай ошибки при загрузке CSS и картинок;
    19. Рекомендуется придерживаться компонентного подхода. Для примера - БЭМ. Но БЭМ это не догма.

    ## CSS

    1. Порядок каскадов должен соответствовать порядку тегов в HTML;
    2. Разделять стили на несколько слоев. Например, первый слой - сброс стилей и установка стилей для основных элементов (ссылки, параграфы, заголовки и т.д). Второй слой - это элементы для каркаса сайта (шапка, сайдбары, контент, подвал). Третий слой - это компоненты страницы (меню, карточка товара и т.д);
    3. Устанавливать базовый шрифт в селекторе body {};
    4. Запрещается использовать индификатор(id) в качестве селектора. Рекомендуется использовать селекторы классов. За исключением установки свойств для основных элементов(ссылки, списки, параграфы и.т.п);
    5. Вложенность селектора не должна превышать два простых селектора. Например, не рекомендуется делать такие селекторы - .menu .menu-list a;
    6. Комментировать основные блоки;
    7. Устанавливать свойства для :focus, :active;
    8. Запрещается использовать !important.

    *Самое главное правило - думать головой! :)*