CSS: Nesting

User Research User Studies
1

I see that Bitwarden is just a mini-site. I randomly open the styles, a random place.

html.theme_light .box-content-row.box-content-row-checkbox label,
html.theme_light .box-content-row.box-content-row-checkbox .row-label,
html.theme_light .box-content-row.box-content-row-link label,
html.theme_light .box-content-row.box-content-row-link .row-label,
html.theme_light .box-content-row.box-content-row-input label,
html.theme_light .box-content-row.box-content-row-input .row-label,
html.theme_light .box-content-row.box-content-row-slider label,
html.theme_light .box-content-row.box-content-row-slider .row-label{
color:#000}`

Open CSS – Nesting:

html.theme_light .box-content-row {
  .box-content-row-checkbox,
  .box-content-row-link,
  .box-content-row-input,
  .box-content-row-slider {
    label, .row-label {
      color: #000;
    } } }

Compact code to 41,1%.

  1. Maybe variant 2:
html.theme_light .box-content-row[class*="box-content-row-"] label,
html.theme_light .box-content-row[class*="box-content-row-"] .row-label {
  color: #000; }

Compact code to 28,5 % !

html.theme_light .box-content-row {
  &[class*="box-content-row-"] {
    label, .row-label { 
      color: #000; } } }

Compact code to 19.2 % !

Use Nesting !

2

I really want to reduce the code to a single use.
Who can suggest option 4 ?

If I see a digits 18%, I will be happy :slight_smile: