It’s interesting how, every now and then, I come across some really obvious improvement to my workflow, even though that “fix” has been sitting – literally – under my nose all along. Here’s an example: today I was researching a better way to organize lengthy CSS files in an attempt to decide whether I should mix, in the list, classes and IDs, or separate them categorically as some classes are “localized” to a repeating structure on the page and work alongside a specific ID/IDs. To this end I was reading through comments for a stop design blog post “CSS organization tip 1: Flags” and finally reached comment #49 written by “Ridge” about three years ago: »Ah, the joy of a keyboard with a number pad. “/” and “*” are right next to one another. Quick two-finger ‘da-dum’ on the keys, and we’re away…»
Blink. I’ve always found cumbersome to hit shift-7 shift-‘ (I use Finnish/Swedish layout keyboard) to produce “/*”, and then few moments later the same in reverse to close the comment tag. And all along – now at least for couple of years – I’ve used a keyboard with a slash and asterisk sitting next to each other atop the number pad. Ah, so obvious!
As for the CSS organization, I think I’ve decided to create three groups: tag definitions (‘body’, ‘p’, ‘div’, etc.), generic classes (used over and over again around the page/site), and IDs mixed with definitions for classes (e.g. “.someLocallyUsedClass”) and tags (e.g. “.someLocallyUsedClass a”) that only appear in association with the ID such as wrapper content. In the past I’ve divided classes and IDs categorically, only to have to jump around in the CSS file when editing a specific area of the page that utilizes, besides some IDs, one or more local tags or classes.