Friday, June 15, 2018

ViewEncapsulation.Emulated scoping and what it means for your CSS

It means you can probably style tags like div and span standalone more often in lieu of slapping a class on the token div and the token span in a component. This should reduce a lot of the orphaned code that tends to build up in stylesheets due to abandoned classes never removed upon a sweeping change. Basically, ask yourself if you really need a class as if there is no longer one God stylesheet there may be many opportunities to avoid using a class that did not exist in prior frameworks. If you need to you can break tags up by semantics. The article tag and the section tag are functionally the same as the div tag, but could have different styles. When approaching semantics, avoid tags which are too specific such as the b tag in favor of similar tags with a bit more general meaning like the strong tag. ViewEncapsulation.Emulated is of course the default ViewEncapsulation in an Angular 4 application and it allows for all styles for the component to be scoped to that component. Basically the compiler crawls that app and renames the classes in both the stylesheet and the markup to append a lead-in in the name that is component specific.

No comments:

Post a Comment