Having just finished development on one of my first Sitecore Helix projects I wanted to share with the Sitecore community how using SASS placeholders helped me keep the code clean, easy to read, simple to maintain and super fast to update styles.

To Habitat or not to Habitat?

One of the first choices I had to make on this project was whether or not to follow the Sitecore Habitat example whereby Front-end assets would be stored in the feature project. This has the advantage of keeping all related files in one isolated location. This approach I felt would not give me the flexibility I needed for this project as the scope of requirements and designs would change daily.

Initial Set up

For this project I chose to put all the Front-end assets in the website project using the Sitecore Helix CSS and theming documentation as a guideline. I mirrored the folder structure as close to the what the back-end developers had in place so it would be easy for another Front-end Developer to get to grips with.

Code Structure

When writing my styling for a Sitecore component I have an single SASS partial and use B.E.M naming conventions and try to stick to single responsibility principles.

For example:-

As the project matured and the lack of a style guide or UI patterns to work from new components were designed and I started to notice common patterns. At this stage I started to refactor the code and break the common patterns into SASS placeholder partials (we’ll use the button as an example).

Refactoring The Code

I created a new SASS partial which only included the common patterns for the button

Then I refactored the existing component to look a little something like this

This allowed me to modify the banner SASS partial background color and color properties whilst using the foundation button styles. The end results was a low specificity, compile time was fast, fewer lines of code and a smaller file size.

Now some of you maybe asking why I didn’t use SASS mixins for this and the reason behind this was I didn’t want the button styling being repeated in the compiled CSS.

The math for this would be (mixin properties x number of uses)  e.g. 5 x 10 = 50 lines of code. Using the placeholder method would result in less lines of code in the output file.

Here a quick example on my codepen:-

If you view the SCSS you can see .banner-1 and .banner-2 are using the extend method and .banner-3 and .banner-4 are using the mixin method. Switch over to the compiled version and you can see the extend method has not repeated code and instead created class comma separated set of CSS properties. The mixin method however has just duplicated all five CSS properties.

I hope this blog post helps with your Sitecore Helix Front-end implementation and if so please leave a comment or drop me a message on Twitter.

Thanks for reading and happy coding.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s