SMACSS Conference
January 23, 2013 -Yesterday fellow Thrillworker Ryan Bruce and I had the pleasure of attending the online SMACSS conference. Lots of nerdy CSS talk for me to get way too excited about.
I’m very much a right-brained front end dev. While this does allow me to create some crazier (and yeah, maybe impractical) stuff, it does mean I can be weak in some of the more technical approaches. That’s where tools like SMACSS are so invaluable. I would wither up and die spending so much timing thinking about something as mundane (yet critically important) as a naming convention; but I can just learn from the best! Jonathan Snook has definitely put in a ton of time thinking about all of this very very left-brained stuff.
My notes will pretty much just make sense to me, but here are some of my bigger take-aways:
- Snook recommends developing with multiple stylesheets in a project (eg. base.css, layout.css, slider.css, playlist.css, etc). In development multiple stylesheets are amazing for testing, collaboration and modularity – at Yahoo! they would create a module (eg. a playlist) and then only need to test the HTML against the base.css and playlist.css.
- For multiple stylesheets to work well one would need to adopt a build system – a process that would typically be able to minify, and strip comments which in itself is a great bonus.
- Gzipping is not only a great way for compressing CSS, but duplicate media queries (eg. done in modules, not one massive media query) won’t increase file size, and somehow magically won’t mess up declaration order. SCIENCE.
- “If you’re adding more than 3 classes on an element you’re probably going too far” – this could be in conflict with OOCSS, but maybe sets a nice guideline.
- Apparently this Compass preprocessor (SASS only) is decent for PC. I’m still very partial to CodeKit, which is only on Mac. Please comment it up if you’ve ever used it.
It was a great conference. I actually intend to read the book again soon. If you write CSS I can’t recommend this resource enough!
Categorized in: CSS
This post was written by ArleyM