2

Im using a template for a website that has some pretty complex CSS.

.container.\31 25\25 {
    width: 100%;
    max-width: 1200px;
    min-width: 960px;
}

What is ".\31 25\25" after the container class? There are many other version of the container class that contains different numbers.

Julian Hernandez
  • 105
  • 1
  • 9
  • 1
    @Ferrrmolina: I don't even know what to say about that title. Good thing the CSS is identical though (which I assume is how you found that question). – BoltClock Feb 01 '16 at 03:08

1 Answers1

1

What is .\31 25\25 after the container class?

It refers to the class named 125%, as would be referenced in HTML as

<div class="125%">

Here is how it breaks down:

.\31 25\25 {
 ^^^              ESCAPE SEQUENCE FOR DIGIT 1
    ^             SPACE TO TERMINATE ESCAPE SEQUENCE
     ^^           LITERAL "25"
       ^^^        ESCAPE SEQUENCE FOR %

This kind of escaping is necessary in the CSS because CSS has the notion of "CSS identifier" which applies to class names (as well as IDs), and CSS identifiers can neither start with a digit, nor contain characters such as %. Note that there is no problem per se with having an HTML class name start with 1, or contain a %, but when writing them in CSS, they must be escaped as was done here. You can include any character in a class name if so escaped, other than a space character, which is used to separate class names.

From the spec:

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code

Backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number

If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that: with a space, or by providing a six-digit hexadecimal number.

In other words, the above could also be written as

\00003125\25

omitting the space after the 31, since the full six hexadecimal digits have been specified.

Actually, you do not need to use the ASCII code for the percent sign; instead, this could also have been written (slightly) more readably as

\31 25\%

escaping the percent sign directly.

I will leave it to CSS language pundits to opine on whether using class names with leading digits, or containing non-standard characters, should be considered best practice. Personally, I see nothing wrong with it.

Community
  • 1
  • 1
  • As a CSS pundit, I agree. it's not the fault of the markup language that CSS has a very specific grammar for identifiers. If you want to restrict your markup so you avoid writing cryptic CSS, that's fine. But not everyone has - or wants to exercise - that level of control over their markup, and that's fine too. That's why CSS provides escape sequences. – BoltClock Feb 01 '16 at 04:55