Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the best practice for naming and casing multi-word CSS classes and ids?

I'm trying to find out what is the best practice for naming and casing css classes and ids, especially multiple word names.

So for instance, say I have a <div> that I want to name "character skills". It seems like there are 3 choices: "characterskills", "character_skills", or "character-skills".

Which one of these is the industry standard for naming css classes and ids?

What's the best practice for splitting multiple words in css names?

Also is it a best practice to always use all lowercase for css names, because they are case-insensitive?

like image 504
Mark Rogers Avatar asked Oct 29 '09 20:10

Mark Rogers


People also ask

What are the best practices associated with using classes vs IDS?

Conclusion. When you're working with CSS, there are no specific reasons forcing you to use an ID over a class. However, it is best practice to only use IDs if you want a style to apply to one element on the web page, and to use classes if you want a style to apply to multiple elements.

How do you name a CSS ID?

The CSS id Selector To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Should CSS classes be capitalized?

Using Title CSS, you'd do the following: For any global CSS class, use a capitalized name (title case). For any modifier or descendant class, use a lowercase letter for the beginning of th name.


1 Answers

I tend to use the hyphenated style as well. I mainly use that style since CSS properties follow the same casing. Similarly, JavaScript functions and variables tend to use lower camel case. For example, to change a CSS property in JavaScript, you would type object.style.textDecoration, but in CSS, that property would be changed with text-decoration.

like image 98
jennyfofenny Avatar answered Sep 23 '22 14:09

jennyfofenny