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

Question

I bought a website template which used -- in their CSS property value. This gives the errors property value expected and at-rule or selector expected. I know of -- being used in for CSS property but never for property value. What does the -- used here mean?

.my-sm-nn1 {
    margin-top: --0.25rem !important;
  }

`--` is used before property take a look at it https://stackoverflow.com/questions/40055654/what-do-these-double-dash-prefixed-css-properties-do — Ahmed Ali, Mar 03 '21 at 06:33
I guess its a variable. But Im not sure variables can starts with numeric values in css. — cbalakus, Mar 03 '21 at 06:34
yeah I'm pretty sure this is either a double negative or just wrong — coagmano, Mar 03 '21 at 06:35
@Ibnelaiq I know that is this how it is normally used, but the code I got from my the template used it in the property value instead, so I am trying to figure out why they did it is this manner. — Lim Han Yang, Mar 03 '21 at 06:36
Check it's occurrence in css file, maybe it is typo mistake? — Ahmed Ali, Mar 03 '21 at 06:37
testing out some stuff, looks like `--something` isn't a valid property anywhere, so not a double negative, just a stuff up — coagmano, Mar 03 '21 at 06:39
yeah, I also tried to manipulate it here. It is not a valid property — Ahmed Ali, Mar 03 '21 at 06:40

caramba · Accepted Answer · 2021-03-03T06:50:05.980

3

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>

Note: if you wonder why is there now more CSS then in your question: I like to add background-colors and borders to elements to be 100% sure that some rules do or do not effect any styling of the elements.

edited Mar 03 '21 at 06:50

answered Mar 03 '21 at 06:41

caramba

21,963
19
86
127

1

One mistake in the code doesn't really mean that the template is "not super clean" We haven't seen the rest of it... – OOPS Studio Mar 03 '21 at 06:42
1

@OOPSStudio if "super clean" means there is 0 lines of rubbish in there. We then find 1 line of rubbish, then it looses the "super clean" flag. – caramba Mar 03 '21 at 06:45
One could argue that "super clean" is not the same as "perfectly clean" But still, I can see your point. – OOPS Studio Mar 03 '21 at 06:47
@OOPSStudio agree! updated the answer with "perfectly clean" – caramba Mar 03 '21 at 06:50

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

1 Answers1