I recently read SMACSS and it has changed the way I want to structure Base, my Front-end (FE) template.
I’m really glad that I took the time and effort to read the book and I’ve learnt a fair amount from it. I’m not going to go into detail about the book, I’m just going to explain the changes that I have made. But I would highly recommend reading it!

Vanilla CSS

Previously I had my media queries in index.html and I was running one or more style sheets based on the users viewport and resolution.

<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="assets/css/min-30.css" media="only screen and (min-width: 30em)">
<link rel="stylesheet" href="assets/css/min-48.css" media="only screen and (min-width: 48em)">
<link rel="stylesheet" href="assets/css/desktop.css" media="only screen and (min-width: 73.125em)">

I’m using a mobile first approach so if you’re on tablet (min-48) then the base (mobile) styles are loaded, then the wider mobile breakpoint and finally the tablet. Min-48 overwrites any previous rules and hey presto you’ve got a tablet style sheet.

I’ve ditched this approach for several reasons.

• Although these style sheets aren’t being read by the browser until they are needed, they are still being loaded initially on page load
• It’s a little bit messy. If I’m making amends to a header for example I have to make changes in multiple style sheets. Would it not be easier to have everything in one place? Making it more Scalable and Modular.
• Simplicity is key for me and I’ve realised I can make use of just ONE style sheet sheet instead of FIVE.
• Too many HTTP requests?

So now we have just one style sheet (style.css). (Remember that Base is a starting point for a web project. You can amend things as you see fit. Using tools such as Grunt can help improve your project.).

Style.css starts off with all the Mobile first code and then media queries are added directly below. This means that the CSS is more modular eaier to read and most importantly it’s easier to work with.

Here’s an example

.example {
color: red;
}

/* - WIDE MOBILE
------------------------------------------ */

@media only screen and (min-width: 30em) {
.example {
color: blue;
}
}

/* - TABLET
------------------------------------------ */

@media only screen and (min-width: 48em){
.example {
color: yellow;
}
}

/* - DESKTOP
------------------------------------------ */

@media only screen and (min-width: 73.125em){
.example {
color: green;
}
}

So all of the styles for the class example are grouped. This example class could be any element from your HTML such as your header or footer. If a  change is needed then all my CSS is in one place. Here’s a quote from the book.

“…instead of having a single break point, either in a main CSS file or in a seperate media query style sheet, place media queries around the module states.”

My biggest concern with adopting this method is the amount of media queries that are going to be in the CSS. They are going to be duplicated over and over. I needed to find out if it’s going to perform adequately.
After a bit of research I came to the conclusion that it doesn’t matter if you combine all media queries together or pepper them throughout the page, there is no appreciable difference between either method. See this link for some nice statistics to support that claim.

I’m reasonably happy with this new approach. It makes much more sense and it’s much more manageable. In addition I love the fact I’m only using one HTTP request.

As I previously mentioned this would be a Base starting point. One style sheet probably isn’t going to work on larger projects and you’re going to have to come up with a solution for that whether that be Grunt or more style sheets or whatever.

SASS

The SASS now works in exactly the same way but it makes use of a mixin for those media queries, making our code look much neater! I’m not going to go into how this mixin works but I will show you an example of how it is used when writing SASS.

.example {
color: red;
@include breakpoint(wide-mobile) {
color: blue;
}
@include breakpoint(tablet) {
color: yellow;
}
@include breakpoint(desktop) {
color: green;
}
@include breakpoint(retina) {
background: url(logo2x.jpg) no-repeat;
background-size: 212px 303px;
}
}

We can make use of nesting with SASS and these media queries slot nicely into the class. I’ve made some basic breakpoints (wide-mobile, tablet, desktop and retina). So your base(mobile first) styles go at the start and you add extra markup for when the user’s viewport gets larger or more enhanced.

When writing SASS make effort to split your partials and modules up. This ensures that your code is reusable, maintainable and a breath of fresh air to any future dev who works on your project.

Style.scss pulls all of the SASS code together and that should be compiled/compressed into style.css. So we end up with one fast, well structured style sheet.

I realise that I may have made some mistakes with this new format and that some things will no doubt be improved int he future. But that’s the whole reason why I created Base, to continuously learn and improve on my FE code.

If you’ve any suggestions then please shoot me a tweet or an email.

• CSS
• HTML
• Learning
• Web Design