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.