I am developing a library of HTML components. The underlying technology is not relevant; the code for each component just generates HTML that is ultimately sent to the browser.
The problem I’m having is that a lot of the generated HTML needs to be styled by the application. And I don’t know ahead of time exactly what that styling might be. Also, the generated HTML tends to have several divs and spans for, each of which might be styled differently. Think of something like a calendar component and all the different ways that might be styled.
At first I thought I’d just assign a class to every non-trivial element. I prefixed all my class names with “foo” (the name of my library), so the div for the calendar component has class foo-calendar. But inside the components I started to wonder about this approach because I kept having to make up weird names for all the various divs that make up each one. And what about when there’s only one tag of a certain type in the component? Do I still give it a class even though it doesn’t add any additional meaning?
The I started thinking that I’ll only add enough classes to uniquely identify each tag. So if there’s only one input field in the component, I won’t give it a class at all, because the CSS selector “.foo-calendar input” will find it. But this approach seems a little too subjective.
Another question I have is, do I prefix all my class names with the name of my library, or only the “top-level” classes? Or do I nest the class names? In other words if the calendar has class foo-calendar, then does the month display have the class “month” or “foo-month” or “foo-calendar-month?”
What strategies do you follow for assigning CSS classes to library HTML?
I’d say more classes is better (to make css selection easier), and namespace them all (to avoid collision), but I’m imagining a WordPress plugin or something modular that I might want to plug into my existing website.
I really like the way Gravity Forms structured their html classes, because it makes it easy for me to tweak and customize without having to touch the markup, so if that’s what you’re looking for, maybe take a look at their CSS Guide: http://www.gravityhelp.com/gravity-forms-css-visual-guide/