This is a very quick post on how to start your CSS class name with a double hyphen Ex: <div class="message --is-danger> Watch out </div>.

I try me best to keep the post simple and direct to the point; so lets consider the following simple example

  <div class="message --is-danger"> You are in a dangerous zoon! </div>

  .message {
  color: #fff;
  background: orange;

.message.--is-danger {
  background: red !important;

Its a very basic example, but lets crack it for a bit.

Our <div> has the class name --is-danger so we should expect to see a red background color right? Well, not really, as this won't work and the <div> will still have the orange (at least for Safari, and at the time ⌚️ of writing this post).


The solution is super simple, and by reading the title of this post "Escaping CSS rules" you will get the point tho. Anyway, lets put the answer by adding a / before the class names stars with double hyphen

Here you go

  .message {
  color: #fff;
  background: orangered;

.message.\--is-danger {
  background: red !important; /* Adding the \ to escape the double hyphen (Its weird, but magically works) 👌🏼 */

DEMO [Test it on Safari and IE please to see the difference]


To know more, please read here Escaping CSS rules

With .

449 0 1