Today I’ve been trying to re-write a multi-level vertical navigation menu like this one.
My goal is to make a set of vertical bars whose children divs lie on the same level horizontally. The way I did it first was to specify height for each divs explicitly:
As you can easily find out that’s a lot of duplicate code. And over the experience of following MOOC courses with Coursera and Code School, I’ve learnt two sentences – Can you better? and Don’t repeat your self. So after two minutes of thinking, I came up with a better solution:
Class dropdown-menu takes care of the gereral rules apply to all divs, the other one just handles the specific height that make each of them lies on the same level.
Organizing my CSS code has always been a nightmare to a noob like me. And this exmaple gives me a good starting place to rethink about how to structure CSS more elegantly, and the goodies of using mulitiple, meaning-oriented class names.
I shall admit that this is an ridiculously easy example. However during my no-even-long career as a developer, I have seen many examples where developers with years of experience don’t pay too much attention about code duplication, which sometimes, will fall into such situation.