Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand the attribute module in CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the attribute module in CSS.

More vs, less-simple comparison

Miraculously, although it annoys me to put so many categories in the tag, people love Harry because he is so unspeakable. Some of the things I advocate, such as OOCSS and the single responsibility principle, from the increasingly complex series of websites I've created, I can say that it's really worth decoupling styling behavior, but it's not until recently that I've found a way to achieve it that I'm satisfied with.

I have previously made a version of BEM that emphasizes independence over reuse-each new block defaults to no style inheritance, allows components to develop independently and avoids the risk of disrupting other styles on the page. But the price is fragmentation-suddenly you'll find that you have 10 different styles of links, 12 different blues, 18 slightly different button styles, and so on. Nicole?

For me, I think the acceptable solution is to go deep into the preprocessing capabilities of CSS to achieve the independence of BEM and the consistency of OOCSS. For example, something like this:

CSS Code copies content to the clipboard

.btn {/ * button styles * /}

.large {/ * global large-type modifier * /}

.rounded {/ * global rounded-border modifier * /}

It should be changed to this:

CSS Code copies content to the clipboard

.btn {/ * button styles * /}

.btn-large {@ extend% large-type;}

.btn-rounded {@ extend% rounded-borders;}

I successfully terminated files full of placeholders, such as _ typography.scss and _ brand.scss, which not only gave me the ability to control fragmentation, but also kept the style independent of each new component by default. Everything is fine, at least for a while.

Modifier: how M destroys BEM

As long as you do any research on the naming and maintenance of CSS classes, you will definitely see Nicholas. Gallagher's masterpiece on the semantics and Front-end Architecture of HTML. Some of them are particularly attractive to me. He calls them 'single-class patterns' vs' multi-class patterns' with modifiers. In a nutshell, there will be two versions of your HTML that look like this:

This is achieved through two alternative CSS patterns:

CSS Code copies content to the clipboard

/ * Single class * /

.btn, .btn-- large {/ * base button styles * /}

.btn-- large {/ * large button styles * /}

/ * Multi class * /

.btn {/ * base button styles * /}

.btn-- large {/ * large button styles * /}

The difference between the two patterns is whether btn--large is sufficient on its own, or whether it needs to rely on the class btn. The single-class mode says "yes", which looks simpler and avoids the situation in which someone forgets to include btn. And it's not verbose, and with SASS's @ extend method, it doesn't look like a burden to CSS, but it has a fatal wound.

Context rewriting

Let's assume that all your buttons have a background color, except for those at the top of your navigation bar.

CSS Code copies content to the clipboard

Header > nav > .btn {background: none;}

In single-class mode, we don't know which buttons will be rewritten, so you have to do this:

CSS Code copies content to the clipboard

Header > nav {.btn, .btn-- large, .btn-- rounded {background: none;}}

Obviously, this is not ideal-appending a button variant means checking for button style rewriting everywhere and adding a new class. Using the property prefix selector ^ =, you can check whether your property begins with a special string, such as:

CSS Code copies content to the clipboard

[btn'] {/ * base button styles * /}

.btn-- large {/ * large button styles * /}

Header > nav > [class^ = 'btn'] {/ * Overrides for all buttons * /}

This implements simple context rewriting in single-class mode, but it is still too weak to be a trustworthy option. The deadliest thing is that if another class appears on btn--large and the prefix selector doesn't match it, then everything after that is over. Moreover, there is no explicit way to specify multiple variants, such as btn--large--rounded.

I appreciate this creative approach, but it's still a dead end. Well, I fucked up here and threw up until one day I had a flash of inspiration.

Why use classes?

Never mind the small problem that I am so direct, but give me a reason first, why is the class the only place where we put style information? The HTML Survival Code says:

3.2.5.7 Class attributes

Property, if specified, must have a value that marks that the element belongs to a different class, represented by a set of space delimiters.

There are no restrictions on how developers can use the tag in class attributes, but developers are encouraged to use expressions that describe the nature of the properties of the content, rather than the results that the content expects to present.

So, it makes sense for us to use classes to describe the "attribute nature of content", but it seems that we require too much of classes. An attribute includes everything, from huge BEM--style naming, such as primary-nav__sub-nav--current to things like u-textTruncate or left or clearfix, to things like js-whatevs used by JavaScript, and then we spend a lot of time solving naming conflicts, and then we want them to be readable.

This is controllable by convention & habit, and Harry's technique, as mentioned earlier in the article, is also useful, but there is the fact that all our operations are based on a global namespace (global namespace), no matter how many specifications cannot be changed. This makes our next AM a little different.

Before we officially discuss it, let's review a little-known feature of CSS.

Welcome to the stage, magical selector

Starting with IE7, browsers began to support an extremely powerful CSS rule called the space-separated attribute selector (space-separated attribute selector). It can match any property value, separated by spaces, as if they were classes. The CSS of the following two lines is equivalent:

CSS Code copies content to the clipboard

.dat-class {/ * dem styles * /}

[class~='dat-class'] {/ * dem styles * /}

Like that, it doesn't care about the order of amemory b and c, it doesn't care if there's anything else, and the = selector doesn't care. However, ~ = is not limited to class attributes, which is the key to this new technology.

Attribute module (Attribute Modules)

The core of the attribute module, or AM, is how to define namespaces for your style. Let's start with a simple example, a grid, first described as a class:

CSS Code copies content to the clipboard

Full

Thirds

Thirds

Thirds

.row {/ * max-width, clearfixes * /}

.column-1 {/ * 1/12th width, floated * /}

.column-2 {/ * 1/6th width, floated * /}

.column-3 {/ * 1/4th width, floated * /}

.column-4 {/ * 1/3rd width, floated * /}

.column-5 {/ * 5/12th width, floated * /}

/ * etc * /

.column-12 {/ * 100% width, floated * /}

All right, then we'll do it in the form of an attribute module. We have two modules, row (rows) and column (columns). The row, which has not changed yet, has 12 columns.

CSS Code copies content to the clipboard

Full

Thirds

Thirds

Thirds

[am-Row] {/ * max-width, clearfixes * /}

[am-Column~= "1"] {/ * 1/12th width, floated * /}

[am-Column~= "2"] {/ * 1/6th width, floated * /}

[am-Column~= "3"] {/ * 1/4th width, floated * /}

[am-Column~= "4"] {/ * 1/3rd width, floated * /}

[am-Column~= "5"] {/ * 5/12th width, floated * /}

/ * etc * /

[am-Column~= "12"] {/ * 100% width, floated * /}

First of all, you must notice their am prefix (am-prefix). This is part of the core of AM, which ensures that the property module does not conflict with existing properties. You can also use whatever you like-I've tried ui-, css- and others, but in this example we agreed to use am-. If HTML checking is important to you or your project, then choosing a data-, means the same thing.

The second thing you'll notice are the values, "1", "4" or "12", which look very bad class names-they are so common that they have a high chance of conflict.

Flexible attribute

So far, the difference is quite subtle. But because each module has its own namespace, let's try our values differently:

CSS Code copies content to the clipboard

Full

Thirds

Thirds

Thirds

[am-Row] {/ * max-width, clearfixes * /}

[am-Column] {/ * 100% width, floated * /}

[am-Column~= "1DB 12"] {/ * 1/12th width * /}

[am-Column~= "1DB 6"] {/ * 1/6th width * /}

[am-Column~= "1DB 4"] {/ * 1/4th width * /}

[am-Column~= "1DB 3"] {/ * 1/3rd width * /}

[am-Column~= "5gam12"] {/ * 5/12ths width * /}

/ * etc * /

Now we can use naming to make our scope look more meaningful-a wide 1x3 flag reminds us immediately that we need to have 4 columns, because we are using a 12-column grid. We also define a default style for all columns-that is, the property column, where columns with no values are treated as full-width columns. In addition, we can move some repetitive logic (in fact, the column is left-aligned) to this property rule.

Format all properties and values

This is one of the core advantages of this approach. There is a basic property, such as am-Button, that can and should define styles. Each extension value of this property should inherit or override the underlying style.

In the grid example above, this is exactly what we did: the tag am-Column= "1x3" matches two attributes [am-Column] and [am-Column~= "1Acer 3"], so the result is the base style + change. It gives us a way to implement that all columns are columns without the need for duplicate classes or the @ extend method of SASS.

BEM's zero-class mode

Going back to the single-class pattern vs multi-class mode in our BEM, AM gives us a zero-class mode option. For example, in the example of the button above, the tag looks like this:

CSS Code copies content to the clipboard

Normal button

Large button

Rounded button

Large rounded button

[am-Button] {/ * base button styles * /}

[am-Button~= "large"] {/ * large button styles * /}

[am-Button~= "rounded"] {/ * round button styles * /}

By creating a new property module, am-Button, we can separate out the styles that apply to all buttons, such as the large buttons and the rounded buttons. Not only are we free to combine these changes (such as am-Button='large rounded'), but we can also do any context coverage for the attributes themselves:

Now it doesn't matter which button you choose, or how many buttons you choose, the key is that all buttons will use the selector [am-Button], so we know that our override is valid.

At this point, I believe you have a deeper understanding of "how to understand the attribute module in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.