Decide where to put "generic wysiwyg" styling: "scope"?

burntcustard commented 5 years ago

Should it be a component? What if there are modified versions: 'c-wysiwyg--blog'?

burntcustard commented 5 years ago

We're going to use scopes! As described here: https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

To modify these, a BEM modifier will be used. For example, if there were blog-specific and header-specific wysiwyg styling, then there would be a _wysiwyg.scss with:

.s-wysiwyg {

  p {
   color: #232323;
  }

  &--header {
    p {
      font-weight: 500;
    }
  }

  &--blog {
    p {
      font-weight: 300;
    }
  }

}

This allows for more straightforward re-use than containing those styles within the examples, c-blog and c-header files.

RussellBishop commented 5 years ago

Not that it matters much, but wysiwyg is maybe redundant in that example as is implied in a scope?

burntcustard commented 5 years ago

It was "inspired by" .s-cms-content {} from https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/ - although I thought "cms-content" was a bit vague, as CMS content could mean things like titles which don't need to be in a scope.

It was also partly inspired by the name of the cmb2 field that often holds the kind of content that ends up being scoped, wysiwyg: https://github.com/CMB2/CMB2/wiki/Field-Types#wysiwyg

I think there are instances where it makes sense to use scope for something like a title + post date + excerpt, which wouldn't be "wysiwyg" fields in the CMS, but would be in an s-header or something similar, which would pair well with s-wysiwyg for article content underneath.

Something like c-article is a nicer sounding example though :grin:

wearelighthouse / stemCSS

Decide where to put "generic wysiwyg" styling: "scope"? #18