css-guidelines.md

Настоящим обязываю разработчиков ДВИП придерживаться следующих положений:

Использовать систему именования классов БЭМ

.block__elem--mod

Вместо __ для block__elem использовать -

Неправильно:

.block__elem

Правильно:

.block-elem

Вместо -- для block--mod использовать _

Неправильно:

.block--mod

Правильно:

.block_mod

Если необходимо назвать часть класса двумя или более словами, использовать lowerCamelCase

Неправильно:

.block-name-element-name

Правильно:

.blockName-elementName

Для цветов использовать слова (white/black/итд) или цветовую модель hsl()

Неправильно:

.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 {}

Не использовать 0 с единицей измерения

Неправильно:

.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%);
}