I read an interview with Eric A Meyer today, who is supposedly the “Godfather of CSS wisdom”, and one thing that stuck out for me is how he structures his CSS files. He says:
I usually organize my CSS by section of the layout, so the header styles are all together at the top of the CSS, the page-content styles are in the middle, and the footer styles come at the end. Then I do my media-query blocks, with the same internal organization.
No, no, no Eric! The first bits seem fine, but don’t group your CSS by screen sizes into different media queries! I have to say I’m a little bit confused why anyone would do it that way, splitting your entire stylesheet into sections wrapped in different media queries. It’s like building the website multiple times over.
I tried to explain this in an older article (see it here), but wasn’t too clear so I’ll have a go at explaining the reasons why I think you should avoid grouping by screen size, and what I do instead, which I actually think is much easier (although obviously do whatever suits you and your project!).
1) Working on the file – and tracking down the distant sections you need
Okay so I’m assuming you’ve got a mobile-first website (and if you’re not using mobile first, you should be!). And if you’re doing it Eric’s way you’ve got at least 2 separate chunks of CSS, styles for mobile (including default styles), and the styles for desktop separately. Between them you might also have media queries for in-between, tablets or small browser windows on desktop. So if you’re using Eric’s method, to change any component on the page, say… the footer, you’d have to skip between distant sections of the same document to add styles.
2) What if you want to target a different screen size?
Okay so you have the very specific styles for mobile, tablet, small and large desktop screens. But what about this, a new device comes out which your client/boss tells you is a big deal. The website HAS to look awesome at this particular size and aspect ratio. Not just acceptable – awesome.
So Eric’s method, he has to create an entire new media query section, slipping it in between the others. What does this do to your mobile first approach? Well you’ll have to leech some of the styles from the larger media query perhaps, and maybe add a few more very specific ones for that size range. Seems like your nice flow of mobile first to larger has just got a bit more bumpy.
My flow – 1) Generic to specific
The method I use was taught my CSS Wizardry’s Harry Roberts in a workshop in London a few years ago. I’ve changed it slightly to suit me, but I think the flow is pretty solid.
He starts with a triangle, because that’s a good way to imagine the best way to write CSS, from the most generic to the most specific, ending with some “trumps” which is essentially allowing for some hacks right at the end.
His triangle needs a bit of explaining – Settings & tools are where you’d define variables and include CSS mixins, maybe your frameworks. Objects and components are things which are reusable throughout the website. Harry explains the rest here, go read that because it’s excellent, and it allowed me to come up with what works for me…
My flow – 2) Files I include
- Framework
- Variables
- Mixins
- Animations
- Global styles (fonts etc)
- Components
- Specific layouts
This order allows you to build reusable components, then if you need a specific alternative for a certain page, you can make a slightly more specific version without having to create a brand new version.
An example of this is all buttons (I like to use the class .btn) might be the same size colour and padding, except on the login page where you can make them all a bit bigger easily using a bit more specificity.
.login-layout .btn {}
Including separate SCSS files
Each of the above is a separate SCSS file, included into the styles.scss, which is where I’ll have global styles for typeface, font sizes, all the basic stuff for the entire site. This works for every project I’ve done recently.
I compile all of these into a single css file, including the entirity of Bootstrap which I do so I can extend some of its classes and use its mixins. It’s all included in the order above, with the most generic items able to be extended further down the line.
One cool thing about SCSS is that if you prefix the filename with an underscore, it doesn’t try and compile the file separately, it know it’s an include file only.
But what about the media queries?
One thing I didn’t mention in the list above is the media queries. That’s because I don’t have a specific place for those. They’re intermingled around the entire thing. If you’re not used to that, you might think it madness. But honestly it feels a lot more organised than the alternative. If you want to work on the _header.scss, all the header styles are right there in one place, and you don’t have to go chasing them down.
I use BEM too, but I’ll explain that in another article!
