BugHunterUK BugHunterUK - 1 year ago 237
CSS Question

How do I use PostCSS Auto Reset?

There seems to be no documentation and I don't quite understand the code examples on the Github page.

I assumed that it would automatically append reset rules to the output CSS file. The documentation uses things like

but doesn't say what they're used for.

What does the following mean?

.block {
padding: 1em;

.block:hover {
background-color: red;

.block__element {
margin: 1em;

.block--modifier {
border: 1em;

Is this just regular CSS? I've not seen
before. If it is just regular CSS what is the purpose of this plugin because I can override defaults in a regular CSS file. I'm trying to avoid having to do that.

Answer Source

The syntax you are talking about (-- or __) is just a CSS methodology called BEM (Block - Element - Modifier) trying to keep CSS maintainable. There is no more hidden magic to it. Further info: http://getbem.com/

The mentioned postcss-autoreset plugin basically just adds the all: initial; property to selectors, which might already have some styles. Therefore you can be sure of no other styles conflicting with your CSS.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download