Question

I am working on some large web projects at work, and a lot of HTML ID’s and Classnames are being used.

When I create something new in one of those huge projects, naming new ID’s and classes can be frustrating, because I always end up with something like #subprojectname_title , .subprojectname_editor to make sure that I don’t overwrite any classes and ID’s that have previously been written for the “parent” project, and to make sure I dont inherit the previously written styles.

I always have to write subprojectname whenever I create a new class or id for that subproject, and thats quite annoying.

I’m looking for suggestions on how I can make my selectors shorter, without having to reset the style to make sure I dont inherit from the previous selector, and without messing with the previously written styles (overwriting them, changing their names).

Answer 1

I have a simple solution for this in my projects.

I use “unique” names for globally effective styles and “common” names for local scope.

i.e. My site.css uses names such as “defaultList” or “defaultWhiteButton”, where as my pageX.css uses “list” and “button”.

I never make use of IDs for my selectors, since IDs are used (in my purposes) for all programmatic behavior and not cosmetic.

I make use of classes only in my CSS.

I hope this helps.