Some great ideas from CSS Wizardry on organizing and writing CSS. Pay close attention to the recommendations on a table of contents and section titles; while I slightly differ from the section and content style listed here, both devices are a huge help once your CSS grows in size.
A common hassle for any developer who writes CSS3 is knowing when to prefix (e.g. -webkit-transition, -o-transition, etc.). When does a vendor fall out of date? Cutting edge Sass developers already have a pretty clean solution for this via pregenerated mixins like Bourbn or their own custom solutions. But if you don’t have that, this Sublime Text plugin is the next best option. Check it out.
The always reliable Harry Roberts on CSS optimization writes a lot of solid points here. But it ultimately comes down to this:
Make sure any classes you write aren’t loose; make sure they’re always well named, and scoped if they need to be.
To put it another way, as I’ve always told classes I’ve taught and colleagues I’ve mentored, good CSS class names are underrated. Choose wisely.
Especially on the eve of iOS 7 fairly radical visual redesign in a more colorful, minimal, and “flat” direction, it’s worth looking at Yahoo’s latest web framework for inspiration. I dig the framework’s simplicity, it’s heavy use of prefix classes and normalize.css.
Developer Philip Walton:
A Rails developer isn’t considered good just because his code works to spec. This is considered baseline. Of course it must work to spec; its merit is based on other things: Is the code readable? Is it easy to change or extend? Is it decoupled from other parts of the application? Will it scale?
These questions are natural when assessing other parts of the code base, and CSS shouldn’t be any different.
I think Philip goes a bit into the deep end with his class naming conventions. Nevertheless, especially with his points about code reuse and modularity, this is essential CSS reading, one of the best articles I’ve read on the subject in weeks.
This is a pretty brilliant tool for anyone maintaining larger sets of CSS. The little Ruby gem parses any passed in CSS files and finds duplicated rule sets. I’d recommend using it with the -n flag to only include duplications with a minimum number of matches (in the case of my current day job, eight or more.) The savings were significant: after some cleanup I saved several hundred lines of CSS, a big win for performance and organization.
Developer and CSS Wizardry writer Harry Roberts:
The problem with leaving hacks and nasty code is obvious; it’s hacky and nasty. However, other problems with leaving this code can arise…The first bits of bad code set a precedent and make subsequent developers feel less bad about using poor code themselves. It was like that when I got here! Give developers a clean slate and they’ll really think twice about messing it all up.
What is needed is a way of allowing these hacks when necessary, but making sure that they don’t go unnoticed and unresolved.
There has been some controversy online about this, but I actually think Harry’s suggestion of a separate file to isolate and focus on crappy CSS to be refactored later is really smart. I might give it a try in an upcoming side project.
Developer Steven Bradley, writing for Adobe, put together one of the best overall introductions to the new flexbox CSS spec that I’ve seen. Rather than just jumping into code, Steven starts with a diagram on overall formatting and layout. It helped me visualize the basics a lot better than some of the canned demos that have floated around the internet lately.
I’ve got a lot of respect for web designer Chris Coyier. His Css Tricks is pretty much the definitive resource I head to when looking up CSS techniques. That’s when, via a pretty random Google search, I came upon this talk he gave late last year. Really great advice here, from development setup to deployment strategy. Chris is a entertaining speaker as well; you won’t get bored.
Web designer Stuart Robson has comparatively more hands on experience with SASS than I do, which makes this pretty in depth SASS mixin a really useful read. At the very least, I’m struck by the importance of writing your media queries in ems, not pixels, a trend that’s really taken hold in the web development community over the past few months.