What are the naming rules for id selectors in css

This time I will give you some popular science about the naming rules of the id selector in CSS, and what are the precautions when naming the ID selector in CSS. The following is a summary. Let’s take a look.

Case sensitive

can only contain [a-zA-Z0-9],-,, which cannot start with,-,0-9

In CSS In the naming convention, the name cannot start with a number, but can only start with a letter, hyphen, or underscore. It can be followed by a letter, hyphen, underscore, or number.
At the same time, it should be noted that although it is not strict in HTML4.01 and previous versions, in XHTML, naming in CSS is case-sensitive.

1. First let’s talk about semantics

The so-called semantics means that the name should describe the content, not the performance. Examples are as follows

♦Performance Type (not recommended)

PurpleBold(purple bold)

BigHeading(large title)

top-left-box(upper left box)

underlined-and-green(underlined green)

boxLeft(left box)

red(red)

The red mark involves the expression of the element, which is in the naming It is not allowed because the form of expression changes. When changes occur, not only the class and id names of the CSS must be modified, but also the class and id names of the corresponding HTML elements must be modified. This is quite troublesome. When you are editing a large website, Multiple such modifications are very time-consuming and troublesome. Therefore, naming that adapts to changes should be adopted as much as possible, that is, naming is closely related to content.

♦Semantic type (advocated)

sidebar(sidebar)

warning(warning)

Of course, sometimes it is appropriate to use expressions to name meetings More flexible. For example, use the bordered display name to add the same style to multiple places on the website.

Remember, the best solution is not the cleanest one, nor the most beautiful one. Instead of sticking to the rules, it is better to open up your ideas.

2. Acceptable Characters

Best Rule: Always use letters, numbers, or hyphens, and always start with a letter

Remember , class and id names are case-sensitive.

Do not use underscores, do not start with numbers or hyphens, and do not accept "*", "/", or "\". Although new browsers have more support for uncommon character sets, this is not the case for all browsers. To ensure compatibility, please follow the best rules.

3. Conventions

Using some conventional names can improve the predictability of the code, making it easier for yourself and others to understand, and also helping screen readers and analyzer work to improve SEO (Search Engine Optimization)

Conventions refer to Web Front-end Development Specification Manual

4. Capitalization

Camel case (each letter of an abbreviated word is in the same case: pdfLink linkPDF)

Hyphens

5. Namespace

Add prefix, such as: wp-users. Namespaces require developing namespace conventions within the team.

This is one of the techniques used by defensive CSS, which isolates code through namespaces to avoid conflicts and prevent it from affecting original and future code.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to choose the image format in web pages

What is the flow layout in mobile layout? What is the principle

The unpopular method of centering elements horizontally and vertically

Vertical centering container of html+css

How to use comparison operators scientifically in js

The above is the detailed content of What are the naming rules for id selectors in css. For more information, please follow other related articles on the PHP Chinese website!