CSS Tutorial: Choosing the right, meaningful element description content

You should understand why I'm talking about this, choosing the right and meaningful elements to describe your content, and making sure that you choose a semantically-rich class class and ID eigenvalue. Doing the right thing will make your life a lot easier, if you're part of a team, and so are the rest of the team. Take a look at the following rule: webjx.com

. l13k {color: #369;} Webjx.com

If you've just taken over the job and you've seen it in the CSS file, can you tell me what this class means?

Most of the cases you would say no. The name of this class may be an abbreviation, but I'm afraid there's no way to figure out what his initials are, in the dark, or in this case, maybe you put it here, you know what it means now, but can you guarantee that 3 years later you remember what it means? Web Teaching Network

Now let's take a look at the following rules:

. left-blue {color: #369;}

You may immediately know that the class selector was created for the blue block of the left sidebar, and it correctly expressed a certain semantics. As I mentioned above, once you want to redesign in a week, but in the refactoring process, this block needs to be positioned to the right, the color changes to red, the characteristics of the class has no meaning. So you need to change all of your eigenvalues now, or nothing will change, but that might or may lead to a lot of confusion.

So the best way to solve the above problem is to avoid using colors (including color names and hexadecimal values) or dimension values of width and height in the naming of class eigenvalues, and you also try to avoid using any values that indicate the form, such as box, left, and right. Conversely, the meaning of separation of performance and content will cease to exist.

Finally, let's take a look at the most appropriate naming rules:

. product-description {color: #369;}

You should be able to understand that this rule is applied to the product description. No matter how many times your design changes, it doesn't change. It feels good to be clear. ：)