Всем привет. Сегодня я расскажу об устоявшемся кодстайле верстки в моей команде в контексте 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{}
}
Ну вот и все. Я рассказать в общих чертах, как у нас выглядит кодстайл верстки на проектах. Надеюсь данный материал был полезен.