Currently we're in a less-than-ideal situation where we have styles that have opinions about defaults, that are not adequately expressed in the CSS as defaults. Take for example the humble <a>.
In the present state of Sauce, in order to get the "default" styles, you'd need to write this:
<a class="sc-rp-link" href="#">Link text</a>
It doesn't make sense that a "default" is actually being applied by a classname, because it's not a default. We should be able to write:
<a href="#">Link text</a>
The good news is that this is easy to do. Using the CSS :not selector we can target any a element WITHOUT A CLASSNAME and apply our "default" styles. Any components that require different styling of links can override the default with a classname.
This doesn't just apply to the <a> element. There are many other elements that share similar DNA, so having a smaller, more robust set of "bare" selectors will help us get a start on building out new pages. These elements include:
[ ] Document root (html/body)
[ ] Basic type: <p>
[ ] Headings: <h1> through <h6>
[ ] Lists: <ul> and <ol>, with <li>
[ ] Links: <a>
[ ] Form elements:
[ ] <button>
[ ] ... more to come in further work - see #65
The aim is that we should be able to put any combination of these elements on an otherwise empty page and have something that looks styled, so we've got a nice baseline from which to build out components.
Currently we're in a less-than-ideal situation where we have styles that have opinions about defaults, that are not adequately expressed in the CSS as defaults. Take for example the humble
<a>.In the present state of Sauce, in order to get the "default" styles, you'd need to write this:
It doesn't make sense that a "default" is actually being applied by a classname, because it's not a default. We should be able to write:
The good news is that this is easy to do. Using the CSS
:notselector we can target anyaelement WITHOUT A CLASSNAME and apply our "default" styles. Any components that require different styling of links can override the default with a classname.This doesn't just apply to the
<a>element. There are many other elements that share similar DNA, so having a smaller, more robust set of "bare" selectors will help us get a start on building out new pages. These elements include:<p><h1>through<h6><ul>and<ol>, with<li><a><button>The aim is that we should be able to put any combination of these elements on an otherwise empty page and have something that looks styled, so we've got a nice baseline from which to build out components.