Abstracting stylesheet objects

abstracting-stylesheet-objects.md

Sass objects

Just about every CSS framework today uses grid objects so lets take the small step of building a straightforward three column grid with CSS objects.

CSS
.width-1 { width: 33.333%; }
.width-2 { width: 66.666%; }
.width-3 { width: 100%; }

HTML
<article class="width-2">…</article>

The result is three lines of CSS and an article with a layout class. Now, lets abstract those same objects to Sass using the silent selector and extending article.

SCSS
%width-1 { width: 33.333%; }
%width-2 { width: 66.666%; }
%width-3 { width: 100%; }

article { @extend %width-2; }

Compiled CSS
article { width: 66.666%; }

HTML
<article>…</article>

The result is clean and simple. One line of CSS and the article element is left at that, no extra layout classes. The style objects can be used in a similar fashion to classes, but instead of being written in HTML they are rendered ahead of time in the CSS itself.

Mobile first and Responsive

Most CSS frameworks have one breakpoint that snaps all columns on a grid down to one column. Some provide multiple layout classes at different breakpoints that exponentially increase CSS size. Unlike CSS objects, Sass objects can be used at any breakpoint of your choosing. When a Sass object is nested in a media query it will start generating styles for that breakpoint automatically and there is still no need for extra classes in HTML. Using the same grid objects in the previous snippet, styling the article for a breakpoint might look like this.

SCSS
article { @extend %width-3; }

@media all and (min-width: 20em) {
	article { @extend %width-2; }
}

Compiled CSS
article { width: 100%; }

@media all and (min-width: 20em) {
	article { width: 66.666%; }
}

Compared to a whole new array of classes for each break point that isn’t much code and the objects are the same no matter what the breakpoint might be. This breakpoint isn’t hard coded anywhere so it becomes easy to introduce styles at whatever size they are needed instead of forcing you to set up breakpoints ahead of time.

But this is mobile first responsive design so we are writing mobile styles first right? Really, these styles don’t need to be written at all as block elements already expand to fill the space. With Sass objects it becomes easier and more efficient to built up from mobile first.

SCSS
@media all and (min-width: 20em) {
	article { @extend %width-2; }
}

Compiled CSS
@media all and (min-width: 20em) {
	article { width: 66.666%; }
}

Why bother writing and re-writing styles for mobile when the browser is built to handle mobile first? Progressively enhancing the grid prooves to be the cleaner option.