Apr 11 2019 at 10:37

Полезные советы по оформлению HTML/CSS в проекте

Invite pending

Всем привет. Сегодня я расскажу об устоявшемся кодстайле верстки в моей команде в контексте angular приложения.

Начнем с небольшой вводной. Так как зачастую сторонние библиотеки пишут css начиная с маленькой буквы, мы приняли решение все свои классы начинать с большой буквы. Мы используем БЭМ. И в нашем соглашении мы используем CamelCase нотацию вместе с kebab-case нотацией, но если это элемент или модификатор, то слово начинается с маленькой буквы.

.BlockName-elementName--modName

Блок не должен иметь внешних отступов. Они добавляются в стилях компонента, где участвует этот блок. Рассмотрим простой пример:

<div class="Page">
  <div class="Page-header">
    <app-header></app-header>
  </div>

  <div class="Page-content">
    <app-content></app-content>
  </div>
</div>

Между шапкой и основным контентом нужен отступ в 100px. Этот отступ мы должны задавать у элементов блока Page, а не у компонентов app-header или app-content.

Старайтесь свои отступы добавляются в одном направлении. Мы используем margin-top/margin-left. По большей степени это связано с тем, что мы реализуем верстку с верхнего левого угла, поэтому нам так удобней. Если рассмотреть предыдущий пример, то отступ в 100px следует задать элементу Page-content.

Один компонент не означает, что это один блок. Разберем что это значит. У нас есть блок шапка. Назовем его Header. В этом блоке у нас отображается логотип, навигация и информация о пользователе.

<div class="Header">
  <div class="Header-logo"></div>

  <div class="Header-nav">
    <div class="Nav">
      <div class="Nav-link">Page 1</div>

      <div class="Nav-link">Page 2</div>

      <div class="Nav-link">Page 3</div>
    </div>
  </div>

  <div class="Header-infoUser">
    <div class="User">
      <div class="User-name">My name</div>      
    </div>
  </div>
</div>

Как мы видим, мы выделили в блоке Header еще два блока, которые мы обрамили элементами Header-nav и Header-info. Именно в элементах блока Header мы занимаемся позиционированием других блоков. В дальнейшем, при необходимости, мы можем выделить блоки Nav и User в другие компоненты. Для того чтоб это сделать проще отделяйте ваши блоки в стилях. ( Мы используем scss )

/** Шапка */
.Header{
  &-logo{}

  &-nav{}

  &-infoUser{}
}

/** Навигация */
.Nav{
  &-link{}
}

/** Пользователь */
.User{
  &-name{}
}

Старайтесь, чтобы вложенность стилей были по подобию вашего html.

<div class="News">
  <div class="News-content">
    <div class="News-header">
      <div class="News-icon" [inlineSVG]="'/assets/svg/calendar.svg'"></div>

      <div class="News-date">
        {{ newsData.publishedAt | date : 'dd MMMM, HH:mm'}} 
       </div>
    </div>

    <div class="News-text">
      {{ newsData.title }}
    </div>
  </div>

  <img [src]="newsData.imageSmall" class="News-img" *ngIf="newsData.imageSmall">
</div>

/** Новостной блок */
.News{
  &:hover {
    &-text{}
  }

  &-content{}
    &-header{}
      &-icon{}
      &-date{}

    &-text{}

  &-img{}
}

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

Hubs: