search

wearelighthouse / stemCSS

Build the stem - don't repeat yourself, don't unset yourself.
MIT License
20 stars 1 forks source link

Simplifying for new users #26

Open burntcustard opened 5 years ago

burntcustard commented 5 years ago

stemCSS looks a bit complicated from the outside. I think there's a few things we can do to help counteract this:

Remove complex top-level CSS rules This is a lot of text:

/**
 * .c-button
 */

$component: 'button';

#{'.' + $global-components-namespace + $component} {
  @extend %u-mh-auto;
}

This is way more familiar to those with CSS (but maybe not as much SCSS) know-how:

.c-botton {
  @extend %u-mh-auto;
}

Usually (by default) multiline comments are preserved in the CSS output, which can result in a lot of random ".c-my-components". Removing these big component headings means we don't have to add in a solution for getting rid of those!

Remove global namespace variables This is more-or-less forced by the above simplification, but I think it'd also help with consistency between projects, and reducing the number of things you have to get your head around when first trying out stemCSS.

RussellBishop commented 5 years ago

Yeah I can get down with this…