NB: This isn’t going to be a breakdown of BEM, just a few links to a few resources and a runaway thought-train.

I’ve tended to be quite organic with my CSS over the years, modifying it as I learn new things. Really the only rules were use a reset/base, alphabetise properties and don’t use !importants. I now want to consolidate my knowledge, and find a more structured, easier to interpret way of doing things.

I’ve been making websites for more than half my life. Naturally during that time my knowledge has evolved, patterns have emerged and I do have a structure I use regularly.

Before I settle into a consolidation plan, I’m doing a bit of reading about different methodologies. I don’t want to stop learning and experimenting, so it may be that I figure out some kind of core and then build on it (it’s not the kind of thing that will ever be “finished”). I know there are tons out there already, but I feel like figuring out my own will be a good way for me to review my CSS skillset and see what needs work.

Currently the CSS for this site is a mess, because I couldn’t decide how to break down my media queries, grid and presentation. It was an experiment that failed, but didn’t have the time to take it where it should have gone.

I haven’t moved into SASS (or other preprocessor) for several reasons: time, it’s a bit developery to set up and one of my clients likes to tweak the CSS & reuse it. Although I’m all over the idea of variables, I guess in some ways I’m a little bit “purist”. At the moment I’m more into the design, and then playing with the CSS which is easier to do on a more raw level.

What even is BEM? How is CSS formed?

Anyway. BEM. Ben Macgowan gave a really interesting talk at Web Expo Guildford (half finished blog post on the way) about the different methodologies that are out there right now, and why he falls into the more “purist” category too. I decided to do a little further reading.

He mentioned BEM, OOCSS and then I think it was SMACSS (damn my incomplete notes). All have their merits and I’ve kind of fallen somewhere in the middle of all three, but liking how CSS Wizardry has BEM in this post. There are some really great resources in that post—check them out!

BEM is just a more reusable, human readable way of doing things. I don’t like the underscores, not because they’re ugly (they are) but because I thought you weren’t supposed to do that and something in me is freaking out at the very idea of it.

Other Bits

I love Brad Frost & Dave Olsen’s Pattern Lab, and atoms and whatnots. Some of its ideas are already in my own structure thing (I should name it, are all the good names taken?)

Might have a look at having a github thing… Probably should already have one. Sharing is caring!

Next up I need to wheel out my last working draft of my own “structure” and see what can be done. I’m quite excited, and will probably want to rewrite every website I have ever done by the end of it.

Oh and CSS Wizardry has this lovely post about vanilla CSS as well.