Skip to content

Latest commit

 

History

History
174 lines (135 loc) · 6.65 KB

styleguide.md

File metadata and controls

174 lines (135 loc) · 6.65 KB
Raw

1. Общие правила верстки

1.1. Семантика

Использовать семантические теги для разметки документа (section, header, footer, aside, nav и тд.)

Именовать классы исходя из их предназначения, а не внешнего вида.

Пример
    /*Плохо*/
    .red-btn{}
    .karta-sajta{}
    
    /*Хорошо*/
    .button{}
    .link{}

1.2. Классы для стилизации

Использовать классы для стилизации элементов. Не стилизовать HTML теги напрямую

Пример:
    <!-- Хорошо -->
    <section class="content">
        <p class="content__text"></p>
    </section>
    
    <!-- Плохо -->
    <section class="content">
        <p></p>
    </section>
    /* Хорошо */
    .content{
        text-align: left;
    }
    .content__text{
        font-size: 14px;
    }
    
    /* Плохо */
    .content{
        text-align: left;
    }
    .content p{
        font-size: 14px;
    }

Исключением являются контентные блоки которые заполняются из админ панели. Эти блоки имеет название "Текстовые блоки" и размечаются 1 уровнем вложенности.

Пример:
    .text-block{
      h1{}
      h2{}
      h3{}
      h4{}
      h5{}
      h6{}
        
      p{}
        
      ul{ 
        li{}
      }
      ol{
        li{}
      }
      a{}
        
      b, 
      strong{}
        
      img{}
    }

1.3. BEM методология

Использовать BEM методологию в именовании классов.

  • Имена записываются латиницей в нижнем регистре.
  • Для разделения слов в именах БЭМ-сущностей используется дефис (-).
  • Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
  • Булевые модификаторы отделяются от имения блока или элемента двумя дефисами (--).
  • Значение модификатора отделяется от его имени двумя дефисами (--). Пример:
   .block-name{}
   .block-name--modifier{}
   .block-name__element{}
   .block-name__element--modifier{}
   .block-name__element--modifier-val{}

Некоторые элементы всегда должны являться блоками. Вне зависимости от контекста.

Список элементов:
  • Кнопки
  • Ссылки
  • Иконки

Документация по BEM

1.4. Не использовать сокращений

Не использовать сокращений для именования классов. Имя класса должно четко давать понять за что этот класс отвечает.

Пример:
    /* Плохо */
    .cont__adv {}
    .btn{}
    
    /* Хорошо */
    .content__advisors {}
    .button{}

1.5. Префиксы и Постфиксы

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

Список:
  • js-* - Специальные классы используемые в JavaScript. Классы с префиксом js- не должны стилизоваться в CSS.
  • l-* - Сокращение от layout. Префикс обозначающий что блок является частью сетки\контейнера.
  • c-* - Сокращение от component. Префикс обозначающий что блок является самодостаточным компонентом.
  • u-* - Сокращение от utils. Префикс обозначающий что это класс утилита.

1.6 Сложные CSS правила

Максимально сократить использование селекторов с использованием ~ + > *. Прежде чем использовать этот селектор подумайте несколько раз сами, или спросите коллегу.

1.7. Идентификаторы

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

1.8. Систематизация разработки.

Выносить свойста из списка в переменные, для облегчения поддержки проекта:

  • Цвета
  • Тени
  • Шрифты
  • Ключевые разрешения
Пример:
   $c-link-color: #fc0000;
   $c-link-color-hover: #fcff00;

   $c-input-shadow: 1px 1px 1px rgba(255,0,0, 0.5);
   
   $Arial: "Arial", sans-serif;
   
   $desktop: 1024px;
   $tablet: 768px;

1.9. Состояния для компонентов

Все интерактивные компоненты должны иметь стили для стандартных состояний:

  • :hover - Состояние когда курсор мыши наведен на элемент
  • :focus - Состояние когда элемент получает фокус, либо при выборе его пользователем при помощи клавиатуры, либо активацией его мышью
  • :disabled - Состояние когда элемент отключен и не может быть использован.
  • :сhecked - (Только для чекбоксов и радиокнопок). Состояние когда чекбокс или радиокнопка включены.

Так же есть состояния для элементов которые необходимы не всегда, и реализуются через добавление соотвествующего класса:

  • success - состояние для валидно заполненного поля.
  • error - состояние для неавалидно заполненного поля.
  • load - состояние элемента во время загрузки.
  • filled - состояние для заполненного элемента.
  • empty - состояние для пустого элемента.