CODEWITHSUNDEEP
htmlcssnaming-conventions
Jeff
Jeff

Reputation: 12163

Creating new CSS class- and ID-names, making sure nothing breaks

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).

Upvotes: 0

Views: 309

Answers (2)

René
René

Reputation: 6176

Instead of .subproject_thingie1 and .subproject_thingie2 everywhere I usually go for adding a root class or id to differentiate between projects/pages.

That way you can have global styling maintained on all pages on the same class names while being able to add specific rules for specific pages.

But as always, the best solution depends on how well the existing project is written.

Upvotes: 0

ericosg
ericosg

Reputation: 4965

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.

Upvotes: 1

Related Questions