Did your less parent selector & play out?

Time:2021-7-23

I don’t know if you feel that CSS is becoming less and less popular in the front circle.
The reasons may be as follows:

  • It’s hard to modularize and maintain. There’s nothing to study
  • I don’t know how to ask in an interview
  • Some companies also have CSS engineers, so the front end doesn’t need to be concerned
  • 。。。

But as a developer who starts my front-end road step by step by looking at Zhang Xinxu’s articles, I can’t “forget this”. I still remember when I just changed my career, I asked me “which do you think you are better at CSS or JS?”, I would not hesitate to say “CSS”.

Students who usually use BEM rules to write styles may often encounter the following (similar) scenarios, in which there will be normal status and selected status in the tag list. The story begins with this HTML code:

<!--  The first organizational form, which individuals prefer -- >
<!--  When there are more child nodes in tag, you don't need to add the -- active modifier -- > to each child node
<div class="tag tag--active">
    <img class="tag__img" />
    <span class="tag__text">222</span>
</div>

<!--  The second form of organization -- >
<!--  May be more in line with the idea of BEM (reduce style nesting) - >
<div class="tag">
    <img class="tag__img--active" />
    <span class="tag__text--active">222</span>
</div>

For the first kind of HTML structure, how to write style more elegantly through the parent selector. Now let’s start with the basic usage of & step by step.

To facilitate our use of command line testing, please install less globally

NPM install less - g // current version: 3.11.3

The following examples are based on the common business scenarios of writing styles through BEM.

I believe that after reading this article, when the students use BEM rules to write styles, the code will be a lot of foreign style.

Basic Usage

&Operator represents the parent selector of a nested rule

The above is the official definition of & for less (please be sure to have a deep understanding). Let’s gradually feel it through examples.

.header {
    &__text {
        color: #000;
        &--active {
            color: #fff;
        }
    }
    &:before {
        content: '';
        display: block;
    }
    &.test3 {
        font-size: 12px;    
    }
}

After compiling through lessC:

.header__text {
  color: #000;
}
.header__text--active {
  color: #fff;
}
.header:before {
  content: '';
  display: block;
}
.header.test3 {
  font-size: 12px;
}

As you can see, & quoted distance from himNearest full parent
Why is emphasis a complete parent,.header__text--activeinstead of.text--activeIs the best proof. Maybe many students’ usage of & will end here (including myself and many colleagues who have worked for many years, yes, I tested them with the following examples, ha ha ha). If you have the pursuit of “engineering excellence”, please continue to look down.

High order usage

As for the HTML structure mentioned at the beginning, how to write the active style coverage gracefully has been bothering me for quite a long time. I even wrote such code for a period of time

.tag {
    &__img {
        width: 100px;
        height: 100px;
    }
    &__text {
        font-size: 14px;
        color: #fff;
    }
    &--active {
        .tag__img {
            background: #000;
        }
        .tag__text {
            color: #000;
        }
    }
}

It’s so ugly. In fact, if you can really understand the parent selector, think carefully and abandon your habitual thinking, you can write the following code:

.tag {
    &__img {
        width: 100px;
        height: 100px;
    }
    &__text {
        font-size: 14px;
        color: #fff;
    }
    &--active &__img {
        background: #000;
    }
    &--active &__text {
        color: #000;
    }
}

Use lessC command to see what it turns out to be

.tag__img {
  width: 100px;
  height: 100px;
}
.tag__text {
  font-size: 14px;
  color: #fff;
}
.tag.tag--active .tag__img {
  background: #000;
}
.tag.tag--active .tag__text {
  color: #000;
}

Please digest it well, actually&Is to replace the existence of the parent.
On the basis of the above scenario, let’s consider another similar situation:

<div class="tag active">
    <img class="tag__img" />
    <span class="tag__text">222</span>
</div>

Different from the above, we use active instead of tag — active. This is very common in actual development scenarios. As a global defined general selected state, active is applied to business scenarios. So now how to override tag__ What about the style of text?

.tag {
    &__img {
        width: 100px;
        height: 100px;
    }
    &__text {
        font-size: 14px;
        color: #fff;
    }
    .active & {
        &__text {
            #000;
        }
    }
}

Use lessC command to see what it turns out to be

.tag__img {
  width: 100px;
  height: 100px;
}
.tag__text {
  font-size: 14px;
  color: #fff;
}
.active .tag__text {
  color: #000;
}

The tag in active state is successfully added__ The text color has been changed to black.
Here we notice&After the class name, please feel it again.
actually&The location of can be used as a parent wherever it is placed, and there is no limit on the number of times it can be used. You can use two or more.

end

This is the end of the article. I hope that the students who have read it can increase their understanding of it&The more important thing is to regain the pursuit of “engineering excellence” in style.
Finally, this article commemorates the day when I just started learning front end.