title: How to prevent global css selectors to interfere with isolated components in Angular (6)?
body: <p>Even if your component stylesheet will be applied in isolation to its component only (e.g. while using the default <code>ViewEncapsulation.Emulated</code>) the class names you will use on your template will still clash with any existent global styling, so you cannot really use more than one single class namespace.</p>
  
  <p>This can lead to always prefixing class names, which in turn can result in very long, weird name groups.</p>
  
  <p>Is there any best practice out there to keep your class names brief and clean (ideally 1-word) without any risk of clashing with any global styling that might be in place?</p>
  
  <p><strong>Real use case example:</strong> I can't use <code>class="row"</code> while styling a component-wide custom logical row if I am using bootstrap.</p>
  
  <p>Look at <strong><a href="https://stackblitz.com/edit/angular-qpdx1e" rel="nofollow noreferrer">this StackBlitz</a></strong>. I want the header of my <code>a</code> component to be fixed-width and bordered only, but it ends up to also have a red background because of global styling.</p>
  
  <p>Yes. I can use a different word, but I should always be aware of the entire word set that is currently used by global styling, not to mention that I don't know whether more global styles will be added in the future, especially in large applications.</p>