Настоящим обязываю разработчиков ДВИП придерживаться следующих положений:
Использовать систему именования классов БЭМ
.block__elem--mod
Неправильно:
.block__elem
Правильно:
.block-elem
Неправильно:
.block--mod
Правильно:
.block_mod
Неправильно:
.block-name-element-name
Правильно:
.blockName-elementName
Неправильно:
.block {
color: #000;
}
Правильно:
.block {
color: black;
}
Неправильно:
.block {
background-image: url(images/background.png);
}
Правильно:
.block {
background-image: url('images/background.png');
}
Не использовать устаревшую модель именования псевдо-элементов с одним двоеточием, всегда ставить два: ::before
Неправильно:
.block:before {}
Правильно:
.block::before {}
Неправильно:
.block {
margin: 0px;
}
Правильно:
.block {
margin: 0;
}
Обслуживать вендорные префиксы с помощью Autoprefixer
Неправильно:
.block {
-webkit-border-radius: 10px;
border-radius: 10px;
transform: rotate(90deg);
}
Правильно:
.block {
border-radius: 10px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
Простейший способ добавить в проект Autoprefixer:
npm install --save-dev autoprefixer postcss-cli postcss-load-config
npx postcss *.css -r
В CSS будут добавлены нужные вендорные префиксы и удалены ненужные.
Таким образом, типичный CSS должен выглядеть приблизительно так:
.blockName-elementName_modifierName::before {
color: hsl(51, 100%, 54%);
}