Namespace EP content zones so we can apply styles to links, etc.

[Paul-Hebert]

One of the big challenges of this boilerplate is any styling we apply has to be namespaced so it doesn't leak into an end user's patterns and styles.

For the most part we do this with lots of classes starting with EP_. For example, we have EP_nav for our nav styles. This works well for HTML we're writing, but not so well for markdown.

Markdown is processed and output without any special classes so it's difficult for us to apply styles to these content sections. We should wrap content sections in an EP class so we can style elements within them. For example we could have an EP_prose class and then write CSS like this:

.EP_prose a {
  /* link styles */
}

.EP_prose ul, 
.EP_prose ol {
  /* list styles */
}

[tylersticka]

Nit: I dislike the EP_ prefix. The underscore feels odd to me and EP ties us to the current platform.

I'd prefer something like styleguide-.

Tools like postcss-prefixer and/or posthtml-prefix-class could help us automate this?

[Paul-Hebert]

Sure! I'm totally fine changing it to a different prefix. One thing I do like about the current prefix is that it's unlikely anything else would be called EP_ so it has a low likelihood of clashing with end user code, and is also easy to do a global find and replace on.

styleguide- seems like it has a slightly higher chance of clashing since end users will be using this tool to make their own style guides, though I'm open to other ideas. Maybe we should open a separate issue to track that?

I'm open to using tools to help with prefixing if they make maintenance easier.

[tylersticka]

The nice thing about using plugins is that you could customize the prefix if you wanted to!

[Paul-Hebert]

Ahh yeah that's a good point. Moving it to plugins would allow us to set it in one place instead of a bajillion places.