OOSass, Foundation and Bootstrap Vinay Raghu - Software Developer

I was listening to episode 2 on Dale Sande on SassCast, where he talks about semantic classes vs presentational classes. Take a look at the below code

<div class="large-6 small-12 medium-8 columns large-centered medium-uncentered">Blah</div>

This is an object oriented approach to CSS, where classes are treat as objects that inherit properties. Using @extends, its possible to use OOCSS approach in your SASS files without bloating your CSS with all those classes. Its an awesome feature and its been in Sass since 3.2.

@extends in Sass

@extends have been around since Sass v3.2. I myself am guilty of not using it to reduce code bloat. Sure, I use it in a lot of places, but I feel, as a community, we still haven’t pushed this one far enough to realize its full potential.

Separation of concerns

Not many of us are taking advantage of this feature. We still have new grid systems coming out that give 300 – 500 lines of grid classes alone. You don’t need all those classes in your CSS files, if you are using only a few.

If you’re like me, the presence of those many classes in the markup is bothering you. Something about having presentational behavior in the markup feels very wrong. Both bootstrap and foundation use this method for all their CSS components.

Code Bloat

I like my markup clean and uncluttered. I would much rather have the same code as below

<div class="tab-container">Blah</div>

My markup is cleaner and I go into my SCSS and add the below code to achieve the same effect

.tab-container{
@extend %large-6;
@extend %medium-8;
@extend %small-12;
@extend %columns;
@extend %large-centered;
@extend %medium-centered;
}

Its readable and reduces code bloat in your markup.

@extend only grid classes bootstrap

Three months back I tried to redo the entire bootstrap sass port into an @extend only version. The source code for that is available here. Most grid classes are output as part of a mixin. This is true for bootstrap and foundation. In my @extend only port of bootstrap sass, I didn’t bother doing that because I had trouble convincing people to adopt this approach. Although every other component was @extend, the grid alone was being output in the CSS.

The problem is a lot of people are used to building apps and websites this way. This change is a shift in thinking. If you’re just prototyping, you don’t really care about things like these. You just want things to work and that’s why it makes sense for bootstrap to do this. But, if you are building a scalable application and want your CSS to be manageable, its not advisable to put your grid classes in your markup.

@extend only grid classes in foundation

I work a lot with foundation and I think it makes a lot of sense for them to implement this as a feature. Enable a switch that allows an @extend only grid classes. If you turn it on, grid CSS are never output but extendable like I did in the above example.

There’s currently a Pull Request in foundation that helps make this a possibility. It still needs work but its a great start. I made a codepen to see how we can achieve this. Line 71 is the main mixin and it works great.

Before we go ahead and code the entire grid of foundation including 5 media breakpoints into a similar loop, I would like to know if the community shares the feeling. If there are other developers out there, who use foundation, feel the necessity for this. I have opened a discussion on their forum for this and am eagerly awaiting what the community thinks.

Sass @imports v2

This is all temporary though. Good folks at Sass are working on revamping @imports. One of the things on their list is to import files but not output any CSS but be extendable. This is a killer feature. But until that comes, we don’t have much choice.

I’d really like to know from fellow developers if this makes sense to you and whether you would incorporate this into your workflow or find it one of those habits difficult to change or totally unnecessary.

<VR>