CSS variables and BEM

by Julien Roche

HTML

<h1>Before</h1>
<div class="main">
  <div class="main__label">A simple text</div>
</div>
<h1>After</h1>

CSS

:root {
  --primary-color: blue;
}

h1 {
  
}

.main {
  --primary-color: #B71C1C;
  --secondary-color: #FFEBEE;
  
  background: var(--secondary-color);
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  height: 2rem;
  line-height: 2rem;
  margin: 0.2rem;
  text-align: center;
}

.main__label {
  color: var(--primary-color); /* Will be inherited because .main__label is used under .main ! */
  font-weight: bolder;
  text-transform: capitalize;
}