. block { padding : one em ; } . block : hover { background-color : red; } . block__element { margin : one em ; } . block--modifier { border : one em ; }
. block , . block__element { /* combined reset block */
all : initial; } . block { /* reseted */
padding : one em ; } . block : hover { /* ignored, we don`t need to reset pseudoclasses */
background-color : red; } . block__element { /* reseted */
margin : one em ; } . block--modifier { /* ignored, we don`t need to reset BEM modifiers */
border : one em ; }
-
'initial' - all: initial ; -
'sizes' - reset size properties.
postcss ( [
require ( "postcss-autoreset" ) ( {
reset : {
margin : zero ,
padding : zero ,
borderRadius : zero ,
} ,
} ) ,
] ) ;
-
'bem' - reset all BEM blocks and element, ignore modifiers and pseudoclasses. (naming: .block__element-modifier ); -
'suit' - reset all SUIT CSS components and parts, ignore modifiers, states and pseudoclasses.
postcss ( [
require ( "postcss-autoreset" ) ( {
rulesMatcher : ( rule ) => rule . selector . match ( / regexp / ) ,
} ) ,
] ) ;
postcss ( [
require ( "postcss-autoreset" ) ( {
rulesMatcher : ( rule ) => rule . selector . match ( / ^[.]\w+$ / ) ,
} ) ,
] ) ;
npm install --save-dev postcss postcss-autoreset
module.exports = { plugins: [ + require('postcss-autoreset')(), require('autoprefixer') ] }