How do I use PostCSS Auto Reset?

Question

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 .block 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 --modifier 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.

score 1 · Accepted Answer · answered Aug 03 '16 at 18:35

1

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.

answered Aug 03 '16 at 18:35

MattDiMu

4,873
1
19
29

Ah I get it. So it only adds `all: initial;` to the elements you style? I was confused because I was loading an empty stylesheet in a document and noticing nothing was resetting. But, when I did `h1 { color: red; }` it reset it. – BugHunterUK Aug 03 '16 at 18:43
Yes, that's all. If your question is answered, feel free to close it / mark as answered. – MattDiMu Aug 03 '16 at 19:05

How do I use PostCSS Auto Reset?

1 Answers1