title: Best Practice for Customising Component Styling in Ionic 4
body: <p>I am looking for best practice for changing component styling in Ionic 4, such as font size. I've read many sources but not clear on what the best approach is.</p>
  
  <p>As I understand it, there is an SCSS file for each component that can be used to set styling for that component, and <code>global.scss</code> for global changes.</p>
  
  <p>Are there any special considerations here? For example, is using element names appropriate or should classes be preferred?</p>
  
  <p>What about when the styling varies between platforms? Is that best done with something like...</p>
  
  <pre><code>ion-card-header {
      .ios &amp; {
  
      }
      .md &amp; {
  
      }
  }
  </code></pre>
  
  <p>To change globally, add it to the global SCSS?</p>
  
  <p>Also how to work appropriately with CSS variables.</p>
  
  <p>Looking for thoughts and best practices please, and any considerations special to the structure of Ionic 4.</p>