Is the 'Cascade' in CSS obsolete?
In the early days of the web we had basic tags and styling attributes. The styling was tied directly to elements and whenever we wanted to style something the same way again all the styling code had to be copied.
Then came the wonderful world of CSS. Where we could separate the styling from the markup and reuse many times without duplication. The first thing people did was attach classes like "red2" which we soon realized wasn't easy to reuse and didn't take advantage of the separation of markup and style.
As CSS evolved we started thinking semantically and logically. Don't use ids, name classes logically as to what patterns are so they are both human readable and ready to use again later. Classes like "nav" and "col-4" were neat and clean and let us style over the basic tags which were still needed for proper semantics and accessibility. However they were still a bit loose, a project could have many navs which may be styled differently in different places. People coding on different libraries could independent use the same class names for different purposes.
Now we are moving to Styleguide and Component driven design in which you design reusable patterns that can be slotted in anywhere. Patterns using BEM or SUIT class names such as "sg-Btn--small" or "sg-Table-head--dark" clearly identify the library it came from, the component, sub-element and the styling variant in one go. It also dramatically reduces the levels of selector specificity making easier to customize your base level CSS later.
The very purpose of component based design and naming is that your styling does not bleed into other patterns not even children with the same tags. The task of the proposed Shadow DOM is to enforce this in web components, until then we carefully name our components to stop the styles cascading. It may make our naming a little more verbose but it is much better encapsulation of patterns and much easier to reuse without unexpected style creep.
In a sense, best practice is now is reduce or eliminate the cascading ability of CSS entirely.









