TIL Thursday: Best Practices for Using Sass

When working with Sass, it's important to make full use of the benefits that it provides. Unlike regular CSS, Sass enables you to use functionality commonly available in other programming languages. If you're new to Sass, you may not be aware of what they are or how to best exploit Sass's power.

In order to find out what the best practices are, I had a chat with Hayley Easton, Senior Developer at NetSuite.

Mobile First, Media Queries and Modular Sass

As we say in our design guide, SuiteCommerce Advanced is built to be mobile first. In theory, this means that you start with what is appropriate for users with the smallest screens and progressively enhance. What this means, in practice, is that when you use things like media queries, you should be using this to add content for larger screens, not hide content for smaller screens.

Consider the following declaration:

.lookbook-slide-caption {
    position:absolute;
    top:0px;
    width:100%;
    text-align:center;
    height:80%;
    @media (min-width: $screen-sm-min) {
        width:50%;
        padding:$sc-base-padding;
        text-align:left;
        height: auto;
    }
}

Note the media query that specifies what should happen when the screen width exceeds 767px. You should never use something like max-width: $screen-sm-max to say what happens to mobile devices, because they should be the default.

Also note that we recommend putting media queries inside the ruleset, not as a wrapper for a ruleset. This helps with modularization: after all, remember that the ruleset is for the selector's sake and not the screen width's.

/* Don't do this */
@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
    .mymodule-container {
        padding-right: $sc-base-margin;
    }
}

/* Do this instead */
.mymodule-container {
    @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
        padding-right: $sc-base-margin;
    }
}

This will help in the long-term upkeep of your Sass.

Mobile first doesn't start and end with media queries; you should be wary of excessively using styling that hides content in the mobile view. If you find yourself making a lot of display: none type declarations, consider the appropriateness of the functionality. For non-critical content, you could, for example, try using a push pane to aid mobile users.

Keep it DRY

Don't repeat yourself.

One of the most useful features of Sass is @extend, and we touched on it in the fourth part of the tutorial on building a module. It's useful because it keeps your styling DRY and prevents your CSS from getting bloated. @extend takes what applies to one selector and applies it to another. So, for example, we include a lot of styling to do with buttons; if your new page contains a primary button then you start by simply extending .button-primary.

Once you've extended another selector, you can then add in any additional customizations that you require to the same declaration. For example:

.mymodule-button {
    @extend .button-primary;
    @extend .button-medium;
    margin: $sc-small-margin 0;
}

There are some drawbacks to @extend, one is that you cannot extend a nested selector, for example:

.mymodule-image-slider .bx-pager-item {
  @extend .home-image-slider .bx-pager-item;
}

This is a limitation of Sass and will result in an error when you compile your Sass. It may still output something but it probably won't be valid CSS.

Another, for example, is that you cannot extend a selector within a media query, which is another reason not to wrap your declarations in media queries.

Use Variables and Avoid Magic Numbers

Sass supports the use of variables: a key feature of any programming language. Try not to use a static value where a variable could take its place. Variables are particular useful for declarations involving:

  • Margins and padding. Make sure you take advantage of the * operator that lets you multiply a variable by an amount
  • Font sizes and weights
  • Colors
  • Breakpoints

So, for example, consider the following styling and the suggested way to rewrite them:

/* Don't do this */
padding-top: 20px;
margin: 20px 0;
color: #fff;

/* Do this instead */
padding-top: $sc-base-padding * 4;
margin: $sc-medium-margin 0;
color: $sc-color-tertiary;

Included in the SCA distribution are a number of base Sass styles. If you check under Modules > suitecommerce > BaseSassStyles > variables, you'll see a number of files that include variables for you to use. Of course, depending on your site's customization, you may have already overridden this file with your own but it'll give you an idea of the sorts of things that are already in use throughout the product.

Variables help ensure consistency throughout your site and that changes can be completed quickly and safely. For example, if you don't declare your colors as variables and you change your site's branding then replacing all instances of a particular could be troublesome and time-consuming. By using something like $sc-color-primary, you declare your primary color once and use the variable in your Sass. It makes adding new things easier by making things like spacing a lot more reliable.

Related to the idea of reliability, you shouldn't use magic numbers. Magic numbers, despite the cool-sounding name, are hardcoded styling values put into CSS to 'fix' some styling that doesn't fit or work in a particular case. They're typically used to fix positioning problems, e.g.:

top: -100px;
/* or */
margin-left: -10px;

They're problematic because they increase opportunities for subtle errors and make it more difficult for styling to be adapted and extended later on.

Use Semantic Class Names

Name class selectors by the functionality, meaning and structure of the elements rather than the behavior or styling.

Thus, avoid referring to particular CSS properties, such as:

  • Color
  • Font-family
  • Float
  • Border
  • Background

This means that you should avoid having class names like icon-white, post-large-font, thick-border, etc. Instead use class names that are specific to the elements. Think about it: if you have a class created to turn something blue, and then you no longer use blue on your site, you're going to have to change it in a lot of places as it's no longer relevant.

Think about what you're actually applying styling to. Use words like heading, title, container, wrapper, banner, and button for the elements themselves and then consider the template you're styling. This means you'll have names like item-details-sku-container, header-menu-search-icon and profile-information-label.

As an aside, this advice isn't specific to Sass or particularly new — W3C has recommended this since 2004.

Make a Cheatsheet

We've talked a lot about variables, so the final bit of advice Hayley has is to build your own list of variables that you can keep in front of you when you're coding. For example, a cheatsheet for the variables in the source code would look something like:

Margins and Padding
$sc-base-padding            5px
$sc-base-margin             5px
$sc-small-margin            10px
$sc-medium-margin           20px

Fonts
$sc-base-font-size          15px
$sc-smallest-font-size      11px
$sc-small-font-size         13px
$sc-h1-font-size            26px
$sc-h1-font-size-mobile     22px
$sc-h2-font-size            22px
$sc-h2-font-size-mobile     18px
$sc-h3-font-size            22px
$sc-h3-font-size-mobile     18px
$sc-h4-font-size            18px
$sc-h4-font-size-mobile     15px
$sc-font-weight-light       300
$sc-font-weight-normal      400
$sc-font-weight-semibold    600
$sc-font-weight-bold        700

Colours
$sc-color-primary           #f15c28
$sc-color-secondary         #5B7F8C
$sc-color-dark-copy         #1f2223
$sc-color-copy              #404040
$sc-color-light-copy        #787878
$sc-color-tertiary          #ffffff

Screen Widths
$screen-xs-min              480
$screen-sm-min              768
$screen-md-min              992
$screen-lg-min              1200

Summary

This is just a few ways to improve the quality of your site's styling code. If you're unfamiliar with Sass then you could initially perceive it as an awkward way of doing CSS. Instead, Sass provides flexibility, extensibility and modularization which ultimately help to make the site easier to maintain and the development team's job easier.

Further Reading