Hitchhiker's guide to CSS Methodologies: SMACSS with snacks

A long time ago, when floating was an acceptable way of creating layouts, and I was fresh out of Uni, I had the pleasure to work with SmaCSS. The web was simpler and jQuery was still all the rage. My mentor at the time (who didn't know he was a mentor) wrote these helpful guides on the matter.

Enough waffling on and let's get down to it!

What's in ...the guide?

Expect a very scientific (I asked some folks about snacks on twitter) discussion about snacks, SmaCSS and some basic overviews that caption the main areas of thinking about systems and design processes. Puns. Alts in the image(s) that I use. If that's not for you, the best book/material on SmaCSS is probably their official documentation.

What the heck is SmaCSS?

It's a way of organising your CSS into scalable, manageable and accessible chunks. It stands for Scalable and Modular Architecture for CSS.

Imagine having a cupboard for snacks. But instead of each snack having a dedicated place, you just throw them in. What happens when you want that chocolate bar? The time you spent looking for it, you could've spent eating the delicious sugar treat.

SmaCSS defines some basic rules of organisation your CSS into:

• Base
• Layout
• Module
• State
• Theme

We break the design into multiple components that we can manage independently, like a holistic approach to designing where we break each part into it's own layer.

Base Rules

A good snack requires a good base. From speaking to my twitter chums, it is clear that we all like cheese. It's the basis of our friendship (and nothing else, melted together, like true friends should be). It's versatile and you can melt it, add to it and extend it (I know that milk should be before cheese, but I prefer cheese to milk... soooo).

Cheese is our metaphorical default styles for our design system. It's your garden variety link, heading, image. It's your classless, stripped out content. It's basics. Our reset CSS (if you're still using a reset), it elements' default states and the skeleton for our project.

Layout Rules

Note, I live in the UK so here are some translations: Crisps are Chips, unless stated otherwise

Layout is like a Doritos crisp/tortilla chip in your nachos (or a bag of plain Quavers delightful). Adds texture and a sense of purpose to the cheese. They help create contexts for each of the following elements. In SmaCSS they are defined with IDs, although we should be able to negate the need for IDs with semantic elements, but that's another bag of crisps for another iteration...

When thinking about layouts we don't care about design, but how things flow and relate to one another. Sections, navigations, sidebars, containers - anything that dictates the flow of your content is a layout.

Module Rules

This is your ice creams, your cakes, your chocolate bars, your grilled cheese sandwiches, your popcorn. You can take your cake and eat it in your office, living room, for breakfast or outside. It's still a cake and hopefully is succulent and tasty.

They are smaller modules on the page. You can take them out and reuse. They might have their own contexts (and do their own thing and do it well). The infamous card component is our module. You can put it in your blog, or on your profile page.

Since modules are created for re-use, these are defined with classes.

State Rules

Things that modify behaviour of your modules. Like flavours of ice-creams, cookies, popcorn (salty all the way imho, but I won't taste shame).

The convention for writing a state is is-state-name, and append that to the modules' class when the state is met. States should be inherited from the module (and by that I just mean module specific), avoids happy accidents.

Imagine you reach out for a carrot cake and instead of the cake tasting like carrot cake, it tastes like raw carrots. We don't want that (or maybe we do, you do you after all), but in CSS it makes things less confusing and more scalable.

Theme Rules

Themes are just themes. In my head it's the appropriateness of different colour and base schemes. It's the art of bringing appropriate snacks to appropriate events. Themes should only really overwrite colour schemes and maybe font styles...

Conclusion

Don't know about you, but now I'm hungry.

Hope this was useful for a quick overview of the methodology. Feel free to ask questions below and/or follow me on twitter for more state of the art hot takes...

Photo credit of the snacks goes to Unsplash's Nico Smit