Search code examples
csspostcss

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

Solution

  • 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.