БЭМ методология

.blockName-elementName--modificatorName
.blockName_elementName__modificatorName

.block-name__element-name__modificator-name

.digit-Progress             /* package-MainComponent */
.digit-Progress-bar       /* package-MainComponent-childElement */
.digit-Progress--small   /* package-MainComponent--variation */

Префикс package- (digit-) используется для создания пространства имён для того, чтобы не было конфликтов с названиями других packages/libraries/frameworks.

Использование тире (-) вместо подчёркивания (_) позволяет выделять отдельные части класс простым двойным кликом в реадкторе.

Для названий, состоящих из нескольких слов удобне использовать стиль camelCase.

Для выделения главного компонена его имя начинается с заглавной буквы в стиле CamelCase: .package-Component-childElement

Для визуального выделения вариаций мы используем двойное тире (--): .digit-Progress--small.

Для оформления заголовком можно использовать следующие примеры

/**
 * Class > Subclass > Variation
 */

/***************************************\
 * Class > Subclass > Variation
\***************************************/