- Примитив - минимальная единица описывающая структурную целостность элемента. Тоесть описываем только стили и логику, но не описываем связей между элементами, либо их поведений.
Пример: иконка это примитив, кнопка это примитив, поведение иконки внутри кнопки это уже не примиоив, это уже компонент.
- Примитив может включать в себя другой примитив только для использования миксинов или переменных, либо для построения на его основе другого примитива;
Пример: кнопка + цвет это два примитива, для отображения цветов кнопки, нужны значения цветов.
Пример: иконка + миксины бутстрапа это два примитива, для работы с иконками, нужны миксины бутстрапа.
Примечания: у примитивов не может быть поведенческих описаний (behavior)
- Компонент - Боле сложная структурная единица, описывающая в осносном связи между примитивами.
Пример: компонент кнопка в котором описано поведения примитива иконка внутри примитива кнопка.
- Компонентом может быть так же достаточно сложная структура, которая не укладывается в понятие примитива.
Пример: Компонент navbar в котором описаны стили для самого navbar а так же поведения компонента кнопка, и поведение примитива иконка внутри компонента navbar.
Примечания: внутри компонента основной фишкой является описание поведений (behavior).
Слой - слои используется в основном для сборки конечных css файлов. В слоях описываются все нужные компоненты и примитивы. Самое близкое описание слоя это Layout в SMACSS