What Does It Mean When a CSS Property Starts with a Dash

What do these double-dash-prefixed CSS properties do?

A double leading dash is used for defining custom properties. For more information, check out this W3C Spec page.

Example from W3C:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

What do leading hyphens mean in CSS?

They are vendor specific CSS properties.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover; /* WEBKIT - Chrome, Safari */
  -moz-background-size: cover; /* MOZILLA - Firefox */
  -o-background-size: cover; /* OPERA */
  background-size: cover;
}

Hypens are used to introduce vendor specific CSS properties, which are used by the browsers but not yet recognized as standard for CSS.

Prefixes often used in CSS are:

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

What does '--' dash dash mean in CSS property value

The use is absolutely useless. If you try run your code you will see the browser ignores it, it looks like:

Sorry to say, but unfortunately you bought a template which is not perfectly clean. This can happen. Maybe it was just a typo by the developer, maybe he didn't care. Hopefully the rest of your template works as expected.

You can run the code and try yourself. The line margin-top: --0.25rem !important; will just be ignored by any browser.

.outer {
  background-color: orange;
  border: solid 1px black;
}
.inner {
  background-color: yellow;
  border: solid 1px fuchsia;
  margin-top: --0.25rem !important;
}

<div class="outer">
   <div class="inner">
   </div>
</div>

Why are dashes preferred for CSS selectors / HTML attributes?

Code completion

Whether dash is interpreted as punctuation or as an opaque identifier depends on the editor of choice, I guess. However, as a personal preference, I favor being able to tab between each word in a CSS file and would find it annoying if they were separated with underscore and there were no stops.

Also, using hyphens allows you to take advantage of the |= attribute selector, which selects any element containing the text, optionally followed by a dash:

span[class|="em"] { font-style: italic; }

This would make the following HTML elements have italic font-style:

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

Ambiguity with arithmetic operator

I'd say that access to HTML elements via dot notation in JavaScript is a bug rather than a feature. It's a terrible construct from the early days of terrible JavaScript implementations and isn't really a great practice. For most of the stuff you do with JavaScript these days, you'd want to use CSS Selectors for fetching elements from the DOM anyway, which makes the whole dot notation rather useless. Which one would you prefer?

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

I find the two first options much more preferable, especially since '#first-name' can be replaced with a JavaScript variable and built dynamically. I also find them more pleasant on the eyes.

The fact that Sass enables arithmetic in its extensions to CSS doesn't really apply to CSS itself, but I do understand (and embrace) the fact that Sass follows the language style of CSS (except for the $ prefix of variables, which of course should have been @). If Sass documents are to look and feel like CSS documents, they need to follow the same style as CSS, which uses dash as a delimiter. In CSS3, arithmetic is limited to the calc function, which goes to show that in CSS itself, this isn't an issue.

Inconsistency with variable naming across languages

All languages, being markup languages, programming languages, styling languages or scripting languages, have their own style. You will find this within sub-languages of language groups like XML, where e.g. XSLT uses lower-case with hyphen delimiters and XML Schema uses camel-casing.

In general, you will find that adopting the style that feels and looks most "native" to the language you're writing in is better than trying to shoe-horn your own style into every different language. Since you can't avoid having to use native libraries and language constructs, your style will be "polluted" by the native style whether you like it or not, so it's pretty much futile to even try.

My advice is to not find a favorite style across languages, but instead make yourself at home within each language and learn to love all of its quirks. One of CSS' quirks is that keywords and identifiers are written in lowercase and separated by hyphens. Personally, I find this very visually appealing and think it fits in with the all-lowercase (although no-hyphen) HTML.

What are these CSS properties that start with a double-hyphen?

These properties are CSS Variables. You can see more on CSS variables here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Here's an example of how to access CSS variables:

element {
background-color: var(--main-bg-color);
}

The reason they are in something called root: The :root selector allows you to target the highest-level "parent" element in the DOM, or document tree.

Can CSS identifiers begin with two hyphens?

Standard

Effectively, a change in CSS Syntax Module now allows identifiers to start with two hyphens:

4.3.9. Check if three code points would start an identifier

Look at the first code point:

• U+002D HYPHEN-MINUS

  If the second code point is a name-start code point or a U+002D HYPHEN-MINUS, or the second and third code points are a valid escape,
  return true. Otherwise, return false.

This change appeared in the 21 Mar 2014 Editor's Draft (changelog), and is still not present in the current Candidate Recomendation, which is the 20 Feb 2014 CR.

It's also described in Changes:

11.1. Changes from the 20 February 2014 Candidate Recommendation

• Change the definition of ident-like tokens to allow "--" to start an ident.

Reason

In www-style, the ...let's change the syntax thread proposed to change the syntax of CSS Variables:

1. Tab Atkins Jr. proposed changing the syntax of Custom Properties to "any ident starting with/containing an underscore".
2. Chris Eppstein disagreed because _property is a common IE6 hack.
3. Brian Kardell proposed --.

4. Zack Weinberg warned:

   Unfortunately, "--" would require a change to Syntax. IDENT isn't
   allowed to start with two dashes in a row.

5. There was a long discussion of what should be done.

6. Tab Atkins Jr. informed they resolved to use a -- prefix to indicate custom properties and other custom things.

So the following day he commited the change of CSS Syntax to github (he is an editor of the spec).

Implementations

Firefox

Firefox allows identifiers to start with -- since Nightly 31 2014-04-03 (pushlog). The behavior was changed in bug 985838:

Bug 985838 - change var- prefix of CSS Variables to --

Recently decided changes to the CSS Variables spec:

• the prefix of the custom property change from var- to --
• inside the var() you use the full custom property name (i.e. with the -- prefix)
• a custom property consisting only of the prefix, --, is allowed
• idents in the CSS parser now allow things like -- and --0

The change landed on Firefox 31.0. Since then, [id=--] works.

However, #-- still does not work even on latest Nightly 41.
I filed bug 1175192 in order to fix that.

Chrome

Chromium built a new CSS parser:

We now allow idents to start with --

It was shipped in this commit, which was part of this commitlist, which was rolled in this commit. So it was finally implemented in build 44.0.2370.0 325166 (pushlog since 325152).

Since then, Chromium allows both [id=--] and #--.

Javascript and CSS, using dashes

Having dashes and underscores in the ID (or class name if you select by that) that won't have any negative effect, it's safe to use them. You just can't do something like:

var some-element = document.getElementByID('css-dash-name');

The above example is going to error out because there is a dash in the variable you're assigning the element to.

The following would be fine though since the variable doesn't contain a dash:

var someElement = document.getElementByID('css-dash-name');

That naming limitation only exists for the javascript variables themselves.

---

Related Topics