What Is the Standard Naming Convention for HTML/CSS Ids and Classes

What is the standard naming convention for html/css ids and classes?

There isn't one.

I use underscores all the time, due to hyphens messing up the syntax highlighting of my text editor (Gedit), but that's personal preference.

I've seen all these conventions used all over the place. Use the one that you think is best - the one that looks nicest/easiest to read for you, as well as easiest to type because you'll be using it a lot. For example, if you've got your underscore key on the underside of the keyboard (unlikely, but entirely possible), then stick to hyphens. Just go with what is best for yourself. Additionally, all 3 of these conventions are easily readable. If you're working in a team, remember to keep with the team-specified convention (if any).

Update 2012

I've changed how I program over time. I now use camel case (thisIsASelector) instead of hyphens now; I find the latter rather ugly. Use whatever you prefer, which may easily change over time.

Update 2013

It looks like I like to mix things up yearly... After switching to Sublime Text and using Bootstrap for a while, I've gone back to dashes. To me now they look a lot cleaner than un_der_scores or camelCase. My original point still stands though: there isn't a standard.

Update 2015

An interesting corner case with conventions here is Rust. I really like the language, but the compiler will warn you if you define stuff using anything other than underscore_case. You can turn the warning off, but it's interesting the compiler strongly suggests a convention by default. I imagine in larger projects it leads to cleaner code which is no bad thing.

Update 2016 (you asked for it)

I've adopted the BEM standard for my projects going forward. The class names end up being quite verbose, but I think it gives good structure and reusability to the classes and CSS that goes with them. I suppose BEM is actually a standard (so my no becomes a yes perhaps) but it's still up to you what you decide to use in a project. Most importantly: be consistent with what you choose.

Update 2019 (you asked for it)

After writing no CSS for quite a while, I started working at a place that uses OOCSS in one of their products. I personally find it pretty unpleasant to litter classes everywhere, but not having to jump between HTML and CSS all the time feels quite productive.

I'm still settled on BEM, though. It's verbose, but the namespacing makes working with it in React components very natural. It's also great for selecting specific elements when browser testing.

OOCSS and BEM are just some of the CSS standards out there. Pick one that works for you - they're all full of compromises because CSS just isn't that good.

Update 2020

A boring update this year. I'm still using BEM. My position hasn't really changed from the 2019 update for the reasons listed above. Use what works for you that scales with your team size and hides as much or as little of CSS' poor featureset as you like.

HTML ID and CLASS naming best practices

Some of these answers are down to personal preference:

Do ID and CLASS have identical naming conventions?

The naming conventions are up to you.

What is the minimum and maximum recommended ID and CLASS attribute length?

There are, as far as I know, no such recommendations.

Why do websites like facebook name there ID and CLASS atributes with random numbers and letters?

To avoid accidental duplication and for tracking purposes.

Should I use camelCase?

It's one good option.

Should I use underscores or numbers?

These are more good options.

My own system (I don't know anyone else who uses it) is the following:

• HTML - <div class="my-string"> [hyphens]
• CSS - .my-string [hyphens]
• Javascript - var myString = ''; [camelCase]
• PHP - $My_String = ''; [underscores]

By using different syntax for variables and classes, I avoid mixing up different types of data.

Should I shorten words with abbreviates like "Detail" becomes "Det" when naming?

You can but personally I wouldn't. But it's up to you.

Should I give ever elements that is a child of body a ID and CLASS atribute?

Not sure I understand this question.

Would I ever need to specify an ID or CLASS attribute for a element within the HEAD element?

No. There is no need for this.

HTML naming conventions for ID, class and to include element type prefix?

I wouldn't prefix with the type, as you can infer this in the selector if you must

form#contact {
    property: value;

}

The method you described is known as Hungarian notation, and isn't very popular.

For what you mention, you could place your injected HTML inside one div with one unique class/id, which has a sort of localised reset. Look up CSS selector specificty to ensure your rules will take affect and not other rules in the host page's CSS. See this answer to a similar question regarding styling an element within a parent page.

Naming class and id HTML attributes - dashes vs. underlines

Use Hyphens to ensure isolation between your HTML and JavaScript.

Why? see below.

Hyphens are valid to use in CSS and HTML but not for JavaScript Objects.

A lot of browsers register HTML Ids as global objects on the window/document object, in big projects, this can become a real pain.

For this reason, I use names with Hyphens this way the HTML ids will never conflict with my JavaScript.

Consider the following:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

html

<body>
    <span id='message'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message'));
        objectContainer.messageClass.write('loaded');
    }
</script>

If the browser registers HTML ids as global objects the above will fail because the message is not 'undefined' and it will try to create an instance of the HTML object. By making sure an HTML id has a hyphen in the name prevents conflicts like the one below:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

html

<body>
    <span id='message-text'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message-text'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message-text'));
        objectContainer.messageClass.write('loaded');
    }
</script>

Of course, you could use messageText or message_text but this doesn't solve the problem and you could run into the same issue later where you would accidentally access an HTML Object instead of a JavaScript one

One remark, you can still access the HTML objects through the (for example) window object by using window['message-text'];

CSS class naming convention

The direct answer to the question is right below this one, by Curt.

If you're interested in CSS class naming conventions I suggest to consider one very useful convention named BEM (Block, Element, Modifier).

UPDATE

Please read more about it here - http://getbem.com/naming/ - that's a newer version that renders the following answer obsolete.

---

Main principles:

• A page is constructed from independent Blocks. Block is an HTML element which class name has a "b-" prefix, such as "b-page" or "b-login-block" or "b-controls".

• All CSS selectors are based on blocks. There shouldn't be any selectors that aren't started with "b-".

Good:

.b-controls .super-control { ... }

Bad:

.super-control { ... }

• If you need another block (on the another page maybe) that is similar to block you already have, you should add a modifier to your block instead of creating a new one.

Example:

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

With modifier:

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Then you can specify any modifications in CSS:

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

If you have any questions I'd be pleased to discuss it with you. I've been using BEM for two years and I claim that this is the best convention I've ever met.

What's the best way to name IDs and classes in CSS and HTML?

The best advice is to use class with semantics in mind

Good names don't change

Think about why you want something to
look a certain way, and not really
about how it should look. Looks can
always change but the reasons for
giving something a look stay the same.

Good names
warning, important, downloadableImage and submenu are all
good names. They describe what a
certain element represents, and they
are not likely to change. A warning
will always remain a warning, no
matter how much the look of the page
changes.

Bad names
border4px, lighttext and prettybackground are all examples of bad
names. You might fatten that border to
a whopping 5 pixels, or the background
may look pretty old after a while, and
not pretty at all. An advantage of
using CSS is that you won't have to
change much in order to change the
looks of your website. If you have to
change all light text into dark text,
and thus change all classes lighttext
to darktext in all your HTML pages,
you're likely to miss a few.

from this article

CSS trends with naming class and id with dash underscore?

The double underscore follows the BEM methodology. It is basically a way of naming classes so that later it becomes easy for the user to understand.

The guiding principle behind BEM seems to be "when designing a page, think in terms of reusable widgets". Which is pretty much the standard way you should be writing your semantic HTML.

Learn more about BEM here: BEM methoodology

Web Standard for naming conventions

All your provided file name is valid.

You must name your file to represent it's content:

What can I say from file name:

scripts.js - All scripts, not minimized

index.js - Only scripts that will be used in index file.

style.css - All styles for page

main.css - Main set of styles that will be used on page, missing specific parts

base.css - Same as main.css

You have to select name that fits best.

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

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.

---

Related Topics