CSS / SCSS

We use SASS/SCSS for all our builds excluding emails or where specifically told not to.

Junior developers are encouraged to learn BEM – which forms part of the Gooey training course.

Whether we use BEM or not, our naming conventions should be functional, readable, practical and relevant, for example the below is not acceptable:

<div class="image">
    <div class="image2">
    </div>
</div>

This should alternatively something like:

<div class="image">
    <div class="image__function-name">
    </div>
</div>

For an example of how we structure our SCSS folders, please see our Gulp template which can be download via: Gulp template

For websites, we segment the website blocks into both separate PHP and SCSS files, with identical names.

Thus for example:

• block-hero.php corresponds to block-hero.scss
• block-promos.php corresponds to block-promos.scss

This approach is also applied for global elements when possible, i.e.

• header.php corresponds to header.php
• footer.php corresponds to footer.php