Gulp.js

First of all, I have to introduce you to Gulp.js because I will mention it throughout the article. Gulp is a task runner, that can do repetitive tasks like:

  • Concatenate and minify CSS and JavaScript files
  • Lint and validate code
  • Compress images

The most important reason I use Gulp is to compile my SCSS into CSS. But I also use Gulp for all these smart plugins that helps me do quicker browser testing with BrowserSync, and instant reload when I save files so I don’t have to reload the browser manually every time I save files (duh). I also work with Grunt.js in some projects but have slowly switched to Gulp lately.

CSS preprocessor

Years ago, I was on a long backpacking trip and didn’t really follow what was happening in the industry. When I came back, I realized that the use of CSS preprocessors had skyrocketed while I was away. I had tried some LESS before, but I did some research of the alternatives and decided to dive into SCSS. In about a week, I was writing CSS like twice as fast! With nesting, variables and mixins I saved a lot of time.

BEM methodology

Since two years ago I’ve been writing CSS in BEM style. BEM is a naming convention methodology for HTML classes and CSS that stands for Block, Element, Modifier. I write it like this (with SCSS):

.hero {
    background: #000;
    color: #fff;
    height: 50vh;
    width: 100%;
    &--inverted {
        background: #fff;
        color: #000;
    }
    &__title {
        font-size: 3rem;
    }
    &__text {
        font-size: 1rem;
    }
}

Which compiles the code to:

.hero {
    background: #000;
    color: #fff;
    height: 50vh;
    width: 100%;
}
.hero--inverted {
    background: #fff;
    color: #000;
}
.hero__title {
    font-size: 3rem;
}
.hero__text {
    font-size: 1rem;
}

SCSS Folder structure

With help of various articles and snooping on different github repositories I have now figured out a folder structure that I’m comfortable with:

/base

The base folder is what we might call the boilerplate of the project. It contains files that sets typography rules, normalize.scss or reset.scss (that defines styles of common HTML elements) and files that control styling of WYSIWYG elements etc.

/helpers

This folder is where I store all variables, mixins and extends. I love the consistency aspect of it, since you can store properties in variables and use throughout the project. I’m also a designer – I don’t like inconsistent font-sizes and margins which I solve by having a mixin or variable for it, so I can reuse it throughout the project.

/layouts

This is where styling for global layout parts like header, footer, grid and even sidebar belongs.

/components

This folder is the folder I spend most time in. I work component based,  so this is where I store files (often reusable) like card.scss, contact-form.scss, hero.scss.

/objects

This is my newest addition to my folder structure standard! The idea is that this folder should contain the smallest building blocks of a website, like a button or an icon. An object can’t contain a component or another object like a component can. An object should be context independent, and should not have any positioning or margin that could break the layout.

/other

The “other” folder usually include a shame.scss file – where I store quick fixes/hacks, that I need to fix later. And since people always forget, it’s pretty handy to store all “hacks” in one place, so you’ll have a reminder to fix it when you see it.

Linting

To ensure I write CSS in a consistent way, I use a Gulp plugin called Stylelint where I by a configuration file can define how the CSS should look like with over one hundred and fifty rules. It’s especially a decent tool if you collaborate on a project with other developers, to ensure that everyone writes in the same style.