Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
OOP-like CSS naming
// css/search-form.scss
.search-form {
> .field {
}
}
// css/search-form/iconic-button.scss
.search-form > .iconic-button {
> .icon {
}
}
// css/search-form/-prefixed.scss
.search-form.-prefixed {
> .prefix {
}
> .field {
}
}
// css/search-form/-prefixed/iconic-button.scss
.search-form.-prefixed > .iconic-button {
> .icon {
}
}
// css/search-form/-sm.scss
.search-form.-sm {
> .field {
}
}
// css/search-form/-sm/iconic-button.scss
.search-form.-prefixed > .iconic-button {
> .icon {
}
}
.search-form
.field
.iconic-button.-primary
.icon
.search-form.-prefixed
.prefix
.field
.iconic-button.-primary
.icon
.search-form.-sm
.field
.iconic-button.-primary
.icon
@gambala

This comment has been minimized.

Copy link
Owner Author

commented Aug 8, 2016

Навеяно подходом RSCSS (сайт, презентация)

Плюсы

  • Элементы внутри компонентов можно называть как угодно, не задумываясь;
  • Нет каскадности, т.к. элементы стилизуются через > селектор;
  • Каждый компонент - в своем файле;
  • Стили для вложенных компонентов очень похожи на наследование в ООП (subclass < class < superclass);
  • Верстка не взрывается, как в случае с БЭМ;
  • Верстка интуитивна - достаточно зайти в файл стилей компонента, чтобы вспомнить, как его верстать;

Нюансы

Конфликты со стилями подключаемых библиотек

Когда возникает: Подключаемая js-библиотека использует классы такие же, как классы элементов.
Что происходит: Стили js-библиотеки применяются ко всем элементам с такими же классами.
Как решить: В проекте явно обнулить стили элементов, и уточнить во вложенных стилях js-библиотеки.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.