How I created my web resume using PostCSS, SASS, BEM, SMACSS, Gulp, Bootstrap (or Foundation) and make it CSS framework agnostic

4 min readAug 13, 2024

— -

Introduction

In this article, I’ll show you how to use naming standards and automate your CSS rules for a responsive website. This approach will allow you to remain independent of any CSS framework (like Bootstrap or Foundation) and enable you to create your own media queries or easily make changes in the future. I wrote this article as a draft when I created my web resume years ago, and I’m just publishing it now.

1. Definition

PostCSS

PostCSS is a tool for transforming CSS with JavaScript. It allows developers to write CSS pre- or post-processors to automate routine CSS operations. A popular example is the “Autoprefixer” plugin. Autoprefixer parses your CSS and determines if certain rules need a vendor prefix. For example:

a {
transition: transform 1s;
}

will become:

a {
-webkit-transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s;
}

PostCSS Website: https://postcss.org

SASS

SASS is a preprocessor scripting language that is interpreted into CSS. It adds power and elegance to the basic language, allowing me to write more maintainable and scalable CSS.

BEM

BEM stands for Block Element Modifier. It’s a naming convention that makes CSS classes easier to read and understand. The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language.

Example:
/* Block component */
.article {}
/* Element that depends upon the block */
.article__title {}
.article__img {}
.article__text {}
/* Modifier that changes the style of the block */
.article__text — blue {}
.article__text — big {}

And in HTML:

<div class=”article”>
<img src=”” class=”article__img”>
<p class=”article__text”></p>
<p class=”article__text article__text — blue”></p>
</div>

BEM Website: http://getbem.com

SMACSS

SMACSS stands for Scalable and Modular Architecture for CSS. It’s a style guide that helps structure CSS to allow for flexibility and maintainability as projects and teams grow.

SMACSS Website: https://smacss.com

2. Example

Let’s walk through an example:

I want to create a gallery on a website with 4 columns of images using Bootstrap, and make it 2 columns on smaller devices. Here’s the initial code:

<div class=”gallery”>
<div class=”row”>
<div class=”col-md-3 col-sm-6"><img src=””></div>
<div class=”col-md-3 col-sm-6"><img src=””></div>
<div class=”col-md-3 col-sm-6"><img src=””></div>
<div class=”col-md-3 col-sm-6"><img src=””></div>
</div>
</div>

Now, imagine after six months of development, there’s a new framework version, or I want to change the framework, or perhaps I want to make the gallery display only one column on mobile devices. To make these changes, I’d typically have to update all the HTML code and CSS classes.

However, by using PostCSS, SASS, BEM, and Gulp, I can automate these changes and make the structure more modular. Here’s how the code evolves:

Using BEM naming:

<div class=”gallery”>
<div class=”row”>
<div class=”gallery__content”><img src=””></div>
<div class=”gallery__content”><img src=””></div>
<div class=”gallery__content”><img src=””></div>
<div class=”gallery__content”><img src=””></div>
</div>
</div>

Using SASS and Bootstrap mixins:

.gallery__content {
@include make-sm-column(6);
@include make-md-column(3);
}

In this example, `.gallery__content` is equivalent to `.col-sm-6 .col-md-3`. If I want to change the column count to 1, I only need to update the SASS file:

.gallery__content {
@include make-sm-column(12);
@include make-md-column(3);
}

I can now switch to a new framework, another version, or create my own media query rules without modifying the HTML code. For example, with Zurb Foundation:

@include grid-column(4);

Using PostCSS and Gulp

By utilizing PostCSS and Gulp (depending on the plugins used), I can compile my SASS files, add prefixes, delete unused CSS classes, optimize media queries into single rules, and combine duplicate selectors.

Here’s what my `Gulpfile.js` looks like:

var gulp = require(‘gulp’);
var postcss = require(‘gulp-postcss’);
var rename = require(‘gulp-rename’);
var processors = [
require(‘postcss-node-sass’),
require(‘autoprefixer’)({browsers: [‘last 5 versions’]}),
require(‘postcss-uncss’)({
html: [‘index.html’],
}),
require(‘css-mqpacker’),
require(‘postcss-combine-duplicated-selectors’)({removeDuplicatedProperties: true})
];
gulp.task(‘default’, function(){
gulp.src(‘css/app.scss’)
.pipe(postcss(processors))
.pipe(rename(‘bundle.css’))
.pipe(gulp.dest(‘css’));
});

I then rename my SCSS files to `bundle.css`. With Gulp, I can go further by minifying the code and creating a distribution folder.

— -

This approach not only saves time but also makes the CSS more maintainable and adaptable to future changes. By leveraging these tools, I can create a more modular, scalable, and efficient workflow for any web project.

Nb: I got inspired to use SASS and mixins from an article on Medium in 2019, but I can’t find it. If you have the link, please share it.