Is There a Maximum Length for the Class Name in CSS

Is there a maximum length for the class name in CSS?

.thereisnomaximumlengthforaclassnameincss {
maxlength: no;
}

Good luck!
There is no maximum length it says.

How long can a CSS selector be?

ScottS concluded Chrome handles 1366 selectors. Why 1366?

1366 * 3 = 4098

Why 3? There are 3 components in this selector: .y1366 .c1 > *.
4098 is the limit of total number of selector parts. Proof here (I added > * to the first selector only and it marked 4095 elements instead of 4096).

My tests

A group of 4096 selectors will have the remaining ones completely ignored. Example:

.z .y1, .z .y2, .z .y3,..., .z .y3{background-color:red}

Live Example

In the example each selector has 2 components:

.y1 > *
Component 1: .y1
Component 2: *

Every selector placed after the 2048th is ignored. Why 2048? Because each selector has 2 components and the limit is 4096. Not convinced?

Next example

In the example above each selector has one component:

.y1, .y2, .y3 ...

Only the first 4096 selectors are working. Chrome doesn't have a limit, so all of the selectors should work. Yet after a certain point, remaining selectors are completely ignored. This bug existed for at least 2 years. IE9 and below have a limit of 4095 selectors.

Bug 2

A large group of selectors, one of them having two components .bdy .y1 will, after 4096 combined components cause the element with class bdy to be affected.

Example

.bdy .y1, .y2, .y3, ... .y4097{background-color:red}

The CSS selector group above causes an element by class name bdy to have background-color:red applied. The condition is to have 4096 selectors after one selector with two components.

Live example

In the example above the body is applied with red color due to a 4096 selector (after one which targets a child of an element with class name bdy which has class name y1). The bug will cause the parent to be affected.

In .bdy .y1 the element .y1 (under parent .bdy) is targeted, yet an element bdy is also affected. If you move the two component selectors 10 places forward you can create 10 more selectors until this bug manifests. That implies the bug occurs when total number of component selectors reaches 4096.

SOLUTION

They are not going to fix it. This problem will happen only if all selectors are on one line. So just do:

.c1 .y1,
.c1 .y2,
.c1 .y3...

instead of:

.c1 .y1, .c1 .y2, .c1 .y3...

CSS: Is there a limit on how many classes an HTML element can have?

You're only limited by the maximum length of an (X)HTML attribute's value, something covered well by this answer.

Browsers are often very forgiving of standards violations, so individual browsers may allow much longer class attributes. Additionally you are likely able to add a practically infinite number of classes to a DOM element via JavaScript, limited by the amount of memory available to the browser.

For all intents and purposes, there is no limit. I'm assuming you're asking out of curiosity; it goes without saying that if you're seriously worried about hitting this limit, you've done something very wrong.

Is there a limit to how a long the characters of an ID or a class can be when referencing it inside an HTML element?

The specification imposes no limit.

Most browsers probably do.

At the very least, you will eventually run out of RAM.

Is there a way to limit classname length with NPM CSS Loader/Style Loader in react?

You can use localIdentName to manipulate the CSS fields.

e.g.

{
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            mode: 'local',
            exportGlobals: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
            context: path.resolve(__dirname, 'src'),
            hashPrefix: 'my-custom-hash',
          },
        },
      },

This may not work depending on your webpack version:

What worked for the user:
ref:https://github.com/rails/webpacker/issues/2197

{ test: /\.css$/, 
  use: [ 
   { loader: 'style-loader' }, 
   { loader: 'css-loader', 
        options: { 
          modules: true, 
          importLoaders: 2, 
          localsConvention: 'dashes', 
          modules: { localIdentName: '[hash:base64:5]', 
}, 
} 
} 
] 
},

if you remove the hash from the end, or just use the hash, you'll significantly reduce the class name length. or you can write a custom function in its place to reduce it.

ref: https://github.com/webpack-contrib/css-loader#localidentname

ref: Modify output of localIdentName / getLocalIdent

Can I specify maxlength in css?

No. This needs to be done in the HTML. You could set the value with Javascript if you need to though.

What is a practical maximum length for HTML id?

Just tested: 1M characters works on every modern browser: Chrome1, FF3, IE7, Konqueror3, Opera9, Safari3.

I suspect even longer IDs could become hard to remember.

---

Related Topics