SassyBeam (draft)
Beam (or SassyBeam) allows the use of a BEM-like notation but with a lighter HTML markup.
It is a combo based on BEM, Nicolas Gallagher's thoughs, Harry Roberts's adaptations and Jonathan Snook's amazing SMACSS … while adding my personal touch!
The SassyBeam goals
-
Applying a BEM method like
.block__element--modifier
. -
Keeping a light HTML markup!
<div class="block block--mod1 block--mod2 block--mod3">
becomes:
<div class="block--mod1--mod2--mod3">
-
Managing easily the states via pseudo-classes, classes or a data-state attribute.
-
Allowing the nesting of blocks and elements … or not!
-
Maintaining the integrity of class names (no dynamic concatenation like
#{$block}__element
).
Usage
via Bower
$ bower install SassyBeam
.html
<div class="foo">
<div class="foo__baz"></div>
<div class="foo__baz--qux"></div>
</div>
<div class="foo--bar"></div>
.scss
@import 'sassybeam';
@include beam('foo') {
property: value;
@include beam('foo--bar') {
property: value;
}
@include beam('foo__baz') {
property: value;
@include beam('foo__baz--qux') {
property: value;
}
}
}
.css (output)
.foo, [class*="foo--"] {
property: value;
}
[class*="foo--"][class*="bar"] {
property: value;
}
.foo__baz, [class*="foo__baz--"] {
property: value;
}
[class*="foo__baz--"][class*="qux"] {
property: value;
}
Extra
- Examples (more coming soon…)
- Documentation
Feel free to improve, comment, share, …