frontend-developer-1

Use LESS/CSS to Customize the Magento Look and Feel
This is compiled into:
.element-selector {
background-color: #ff0000;
}
@media screen (min-width: 750px) {
.element-selector {
background-color: #0000dd;
}
}
While nesting can appear very helpful, it can introduce tremendous bloat into
styling. It seems to fix specificity problems but adds many extra bytes. The question
that we ask is: “are the additional selectors necessary?” In many cases they are not.
Small changes to deeply nested selectors can have significant impact on output.
For instance, adding a comma and second class name to a selector five levels deep
doubles the entire chain. Deep nesting also leads to hard to manage selectors that
are more specific than required and difficult to override. Instead, using a quality
naming convention, such as BEM will eliminate many levels of nesting and simplify
code reuse.
Copyright © 2018, SwiftOtter, Inc.
110