We have split CSS styles for small pieces of code. In HEAD tag of the HTML layout we have inlined some critical typography styles as well as the following styles, which are also preloaded for increased performance:
- accessibility.css
- reset.css
- critical.css
- (product pages) template-product.css
- (collection pages) template-collection.css
In addition, these styles are lazy loaded directly on the HEAD tag:
- component-grid.css
- component-card.css
- component-sliders.css
- (if animations enabled) animations.css
- (if quick buy enabled) component-modal.css
- (if quick buy or product page) component-product-form.css
The rest of the styles are lazy loaded on the BODY tag for enabled sections or components.
We use BEM methodology in our CSS files. BEM stands for "Block Element Modifier", and this is how it would look in SCSS:
And this is what it would look like in CSS:
