[K7] BEM mixin #12884
[K7] BEM mixin #12884
Conversation
|
Why bemify? Never heard of it, and doesn't seem like a highly depended upon in the community. Will it create a barrier for people on the team to contribute to the sass code? |
|
@kjbekkelund These are valid concerns, thanks for bringing them up! Our goal is to make BEM as "automatic" as possible when people contribute SCSS. It's a lot easier for people to conceptually grok components vs children vs modifiers, but not always so easy to remember the exact syntax (especially if you don't spent a lot of time in CSS-land in general). Bemify is a pretty simple set of mixins for automatically generating the correct BEM syntax in our CSS classes. If it's as useful as we hope, then it should make it easier for people to contribute SCSS. If it turns out to be cumbersome or to introduce workflow problems (e.g. it becomes more difficult to grep for components) then we'll remove it or find another solution. |
style_guides/scss_style_guide.md
Outdated
| @@ -15,6 +15,10 @@ Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sa | |||
| The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using | |||
| hex values. | |||
|
|
|||
| ### Bemify for namespacing | |||
|
|
|||
| We use the [bemify](https://github.com/franzheidl/bemify) for namespacing the sass into a BEM format. We use `component`, `child`, `modifier` and `state` as our mixin names. We've adjusted the plugin's state mixin so that you need to write out the full selector (`@include state('is-happening')`). | |||
There was a problem hiding this comment.
Can we add an example to demonstrate how each mixin should be used? This should also help address some of @kjbekkelund's questions about why/what, if they occur to anyone else.
|
Thanks for explaining, @cjcenizal. I expect some examples and better descriptions in the readme will help much. It still "feels" weird, but it'll be much easier for me to see how it feels when we add more code |
|
If we continue to have a large amount of people contributing CSS I'd like to use a mixin system to keep namespacing correct. It's obviously a pain point in our current system and there are very little downsides. I've used similar systems in the past I'll add some examples. |
style_guides/scss_style_guide.md
Outdated
| #### Example | ||
|
|
||
| ``` | ||
| // Generates .kuiBtn |
There was a problem hiding this comment.
Can we use the existing kuiButton class name for this example?
style_guides/scss_style_guide.md
Outdated
| } | ||
|
|
||
| // Generates .kuiBtn.is-loading | ||
| @include state('is-loading') { |
There was a problem hiding this comment.
We're currently formatting our state classes as kuiButton-isLoading -- can we use that here too?
There was a problem hiding this comment.
Yep. Will just need to adjust the mixin.
There was a problem hiding this comment.
Err, adjust my docs, not the mixin.
Bemify mixin for handling namespacing in our sass.
Bemify mixin for handling namespacing in our sass.
Bemify mixin for handling namespacing in our sass.
Bemify mixin for handling namespacing in our sass.
Adds bemify to our mixins. Slight adjusted to be usable with our slanted rules, which are discussed in the styleguide.