1

In my own personal style, I liked adding small helper CSS classes with a command-line-argument-like syntax, such as

<div class="button --small --red"></div>

But I realized today that any class prefixed with -- is ignored in Safari and iOS, however seems to work as expected in Firefox and Chrome. Is there any reason for this?

dargue3
  • 2,802
  • 2
  • 14
  • 23
  • 3
    Related: [Can CSS identifiers begin with two hyphens?](http://stackoverflow.com/questions/30819462/can-css-identifiers-begin-with-two-hyphens) - in short, Firefox allows it because css-variables allows it, and Chrome allows it either because Chrome once had a css-variables implementation that has since been scrapped, or because Chrome. – BoltClock Dec 11 '16 at 18:31

1 Answers1

3

Per CSS 2.1 it is invalid grammar for an identifier and the rules are the same in the lastest CSS3 (see the "railroad tracks") recommendation. Here are the relevant rules for CSS 2.1:

ident       -?{nmstart}{nmchar}*
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}

An identifier can start with an optional - (0x2d); the second character is from the restricted nmstart and cannot be a - or an ASCII digit.

Browsers that accept --foo as an identifier are using "more relaxed" rules (classify as desired).

If really wanting to get technical/fancy/confusing, any Unicode character with a CP higher than 0x240 can be used as the second character as it conforms to {nonascii} - this includes a wide range of hyphen/minus-like characters. YMMV on browser interoperability and sustainability:

<div class="button ––small —red"></div>

Please don't do this: the first is two EN DASH (0x2013) characters, the latter is a single EM DASH (0x2014) character. Good luck debugging selectors/code with either.

user2864740
  • 60,010
  • 15
  • 145
  • 220