Detailed explanation of DIV+CSS naming rules can help achieve SEO optimization

1. CSS file naming conventions

Suggestion: Use letters, _, -, and numbers. It must start with a letter and cannot be pure numbers. In order to facilitate the management of style names after development, please use meaningful words or abbreviations to name them so that colleagues can understand at a glance what the style belongs to, thus saving time in searching for styles, for example:
The header style is header. For the left side of the header, you can use header_left or header_l. If it is a column structure, you can use box_1of3 (the first column of three columns), box_2of3 (the second column of three columns), box_3of3 (the third column of three columns). I will not give examples for the others one by one. Just name them according to the above rules.

Here are some commonly used naming words for your convenience: (In the future, everyone can slowly share the words they have accumulated during their work, so that everyone's naming will be more unified and there will not be a situation where there are multiple words with the same meaning.)

Overall style: global.css;
Structural layout: layout.css;
Font style: font.css;
Link style: link.css;
Print style: print.css;

Container: container/box
Header: header
Main navigation: mainNav
Sub-navigation: subNav
Top navigation: topNav
Website logo: logo
Big Ad: banner
Middle of the page: mainBody
Bottom: footer
Menu: menu
Menu content: menuContent
Submenu: subMenu
Submenu content: subMenuContent
Search: search
Search keyword: keyword
Search range: range
Tag text: tagTitle
Tag content: tagContent
Current tag: tagCurrent/currentTag
Title: title
Content: content
List: list
Current location: currentPath
Sidebar: sidebar
Icon: icon
Note:
Login: login
Register: register
Column definition: column_1of3 (the first of three columns)
column_2of3 (the second of three columns)
column_3of3 (the third of three columns)

2. The use and difference between id and class

We know that when defining a style in a style sheet, we can define either an id or a class, for example:

ID method: #test{color:#333333}, call <div> content <div> in the page
CLASS method: .test{color:#333333}, call <div class="test"> content <div> in the page
An id can only be used once on a page, but a class can be referenced multiple times.
I used multiple identical ids on the page and it displayed normally in IE. There seems to be no difference between id and class. Is there any impact of using multiple identical ids?
The existence of multiple identical IDs on a page will result in it failing W3 validation.
In terms of page display, current browsers still allow you to make this mistake, and using multiple identical IDs can "generally" display normally. But when you need to use JavaScript to control this div through the id, an error will occur.
An id is a label used to distinguish different structures and contents, just like your name. If there are two people with the same name in a room, confusion will arise.
A class is a style that can be applied to any structure and content, just like a piece of clothing;
Conceptually, they are different:
The id method is to find the structure/content first and then define the style for it; the class method is to define a style first and then apply it to multiple structures/contents.
In other words, it is recommended that when writing XHML+CSS, if it is a structural positioning, use id, otherwise use class (this will allow the id of the non-structural positioning div block to be defined by the programmer himself)
Web standards expect everyone to write code using strict habits.

3. Use CSS abbreviations

Using abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules for commonly used CSS abbreviations are:

color
If the values ​​of every two digits of a hexadecimal color value are the same, they can be abbreviated in half, for example:
#000000 can be abbreviated as #000; #336699 can be abbreviated as #369;
Box sizes are usually written in four ways:
property:value1; means all edges have a value of value1;
property:value1 value2; means the values ​​of top and bottom are value1, and the values ​​of right and left are value2
property:value1 value2 value3; means the value of top is value1, the values ​​of right and left are value2, and the value of bottom is value3
property:value1 value2 value3 value4; the four values ​​represent top, right, bottom, left respectively
A convenient way to remember is clockwise: up, right, down, left. Specific examples of application in margin and padding are as follows:
margin:1em 0 2em 0.5em;
Border
The properties of the border are as follows:
border-width:1px;
border-style:solid;
border-color:#000;
It can be abbreviated into one sentence: border:1px solid #000;
The syntax is border:width style color;
Backgrounds

The properties of the background are as follows:

background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
It can be abbreviated into one sentence: background:#f00 url(background.gif) no-repeat fixed 0 0;
The syntax is background:color image repeat attachment position;
You can omit one or more of these property values. If omitted, the property value will use the browser default value, which is:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
Fonts

The font properties are as follows:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
It can be abbreviated into a sentence: font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Note that if you abbreviate the font definition, you must define at least two values: font-size and font-family.

Lists

To cancel the default dots and serial numbers, you can write list-style:none;

The properties of list are as follows:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

It can be shortened to one sentence: list-style:square inside url(image.gif);

4. Explicitly define the unit, unless the value is 0

Forgetting to define the units for dimensions is a common mistake made by CSS novices. In HTML you can just write width=100, but in CSS, you have to give an exact unit, such as: width:100px width:100em. There are only two exceptions where you can leave units undefined: line height and zero value. Apart from this, all other values ​​must be followed by the unit. Be careful not to add spaces between the value and the unit.

5. Case sensitivity

When using CSS in XHTML, element names defined in CSS are case-sensitive. To avoid this error, I recommend using lowercase for all definition names.
The values ​​of class and id are also case-sensitive in HTML and XHTML. If you must use mixed case, please make sure that your CSS definition is consistent with the tags in XHTML.

6. Cancel the element restrictions before class and id

When you define a class or id for an element, you can omit the preceding element qualification, because IDs are unique within a page and classes can be used multiple times within a page. It makes no sense to limit yourself to a certain element. For example:
div#id1{} can be written as #id1{}
This saves some bytes.

7. Default Values

Usually the default values ​​of padding and margin are 0, and the default value of background-color is transparent. However, the default values ​​may be different in different browsers. If you are afraid of conflicts, you can define the margin and padding values ​​of all elements to be 0 at the beginning of the style sheet, like this:

* { 
padding:0; 
margin:0 
}

Or define it for an element:

ul,li,div,span { 
padding:0; 
margin:0 
}

8. CSS Priority

inline style > ID selector > class, pseudo-class and attribute selectors > type, pseudo-element

explain:

*Inline style: The style attribute of an element, such as <div style="color:red;"></div>, where color:red; is the inline style.
*ID selector: the id attribute of the element, such as <div></div> can use the ID selector #content
* Pseudo-class: The most common is the anchor (a) pseudo-class, such as a:link, a:visited.
* Attribute selectors: For example, div[class=demo] contains div elements with class demo
*Type selector: HTML tag selection, such as div .demo, the div element contains elements with class demo
*Pseudo-element selector: for example, div:first-letter, the first word under the div element.

9. No need to redefine inherited values

In CSS, child elements automatically inherit the property values ​​of parent elements, such as color and font. Those that have been defined in the parent element can be directly inherited in the child element without repeated definition, unless the purpose is to change the style of the current element without using the parent element's property value. However, please note that the browser may overwrite your definition with some default values.

10. Multiple CSS style definitions, attribute appending and duplication last priority principle

A tag can define multiple classes at the same time, or it can define attributes repeatedly in the same class. For example:

Let's define two styles first.

.one{width:200px;background:url(1.jpg) no-repeat left top;} 
.two{border:10px solid #000; background:url(2.jpg) no-repeat left top;}

In the page code, we can call it like this:

<div class="one" two></div>

So what is the final display effect of this div style? ? Which one should be used as the standard for duplication? ?

The styles applied to <div class="one" two></div> are as follows:

width:200px; 
border:10px solid #000; 
background:url(2.jpg) no-repeat left top;

Because, when two or more styles are applied, the style applied by the browser is based on the principle of attribute appending and repetition last priority. That is, for two or more or repeated style name definitions, the styles applied by the browser are in order. If repeated attribute values ​​are defined, the last defined one will prevail. If two or more style names are applied, the attribute values ​​that are not repeated will be appended, and the repeated attribute values ​​will be based on the last one. It should be noted here that the order of styles is not based on the order of their names applied on the page, but the order of styles in the style sheet.

11. Using descendant selectors

Using child selectors is one of the things that affects their efficiency. Child selectors can help you save a lot of class definitions. Let's look at the following code:

<div> 
<ul> 
<li class="subnavitem"> <a href=http://duote.com/# class="subnavitem">Item 1</a></li>> 
<li class="subnavitemselected"> <a href="http://duote.com/#" class="subnavitemselected"> Item 1</a> </li> 
<li class="subnavitem"> <a href="http://duote.com/#" class="subnavitem"> Item 1</a> </li> 
</ul> 
</div>

The CSS definition for this code is:

div#subnav ul { } 
div#subnav ul li.subnavitem { } 
div#subnav ul li.subnavitem a.subnavitem { } 
div#subnav ul li.subnavitemselected { } 
div#subnav ul li.subnavitemselected a.subnavitemselected { }

You can replace the above code with the following

<ul id=”subnav”> 
<li> <a href="http://duote.com/#>" Item 1</a> </li> 
<li class="sel"> <a href="http:/duote.com/#>" Item 1</a> </li> 
<li> <a href="http://duote.com/#>" Item 1</a> </li> 
</ul>

The style definition is:

#subnav { } 
#subnav li { } 
#subnav a { } 
#subnav .sel { } 
#subnav .sel a { }

Using child selectors can make your code and CSS more concise and easier to read.

If there are multiple identical elements in a container, and the styles of these elements are different, please avoid using this method and use different classes, such as:

<ul class="one"><li></li></ul> 
<ul class="tow"><li></li></ul>

12. No need to quote background image paths

To save bytes, I recommend not putting quotes around the background image path, as they are not required. For example:

background-image:url("images 
margin:0 auto; 
}

However, IE5/Win cannot display this definition correctly. We use a very useful trick to solve it: use the text-align attribute. Like this:

body { 
text-align:center; 
} 
#wrap { 
width:760px; 
margin:0 auto; 
text-align:left; 
}

The first body text-align:center; rule defines that all elements of the body in IE5/Win are centered (other browsers only center the text), and the second text-align:left; aligns the text in #warp to the left.

13. Import and hide CSS

Because older browsers don’t support CSS, a common approach is to use the @import technique to hide CSS. For example:

@import url(main.css);


However, this method does not work for IE4, which gave me a headache for a while. Later I wrote it like this:

@import main.css;

This way you can hide CSS in IE4 as well, and save 5 bytes. For a detailed explanation of @import syntax, see Centricle's CSS filter chart.

14. CSS hack

Sometimes, you need to define some special rules for IE browser bugs. There are too many CSS techniques (hacks) here. I only use two of them. Regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version, these two methods are the safest.

1. Annotation Methods

(a) To hide a CSS definition in IE, you can use a child selector:

html>body p { 
}

(b) The following syntax is only understood by IE (it is hidden from other browsers)

* html p { 
}

(c) Sometimes, you want IE/Win to be effective but IE/Mac to be hidden. You can use the backslash trick:

* html p { 
declarations 
}

(d) The following syntax is only understood by IE7 (it is hidden from other browsers)

*+ html p { 
}

2. Methods of conditional comments

Another approach, which I think is more proven than CSS Hacks, is to use Microsoft's proprietary conditional comments. Using this method you can define some styles for IE separately without affecting the definition of the main style sheet. Like this:

<!--[if IE]> 
<link rel=stylesheet/css href="http://www.duote.com/style/ie.css" /> 
<![endif]-->

There are more CSS hacks that you can find online, but many of them do not meet the w3c standard. Based on the above hacks, I wrote a style that can distinguish IE6, IE7, and FF, and it meets the w3c standard. The code is as follows:

.classname {width:90px!important;width:100px;} 
*+html .classname {width:95px!important;}

After writing this way, the width is 100px in IE6, 95px in IE7, and 90px in Firefox.

15. Debugging tips: How big is the layer?

When debugging CSS errors, you have to analyze the CSS code line by line like a typesetter. I usually define a background color on the problematic layer so it's obvious how much space the layer takes up. Some people suggest using border, which is generally acceptable, but the problem is that sometimes border will increase the size of the element, and border-top and border-bottom will destroy the value of the vertical margin, so using background is safer.
Another property that often causes problems is outline. An outline looks like a boeder, but does not affect the size or position of an element. Only a few browsers support the outline property, the only ones I know of are Safari, OmniWeb, and Opera.

16. CSS code writing style

When writing CSS code, everyone has their own writing habits for indentation, line breaks, and spaces. After continuous practice, I decided to adopt the following writing style:

.classname { 
width:100px; 
}

When using joint definitions, I usually put each selector on its own line so that they are easier to find in the CSS file. Put a space between the last selector and the curly brace {, and write each definition on a separate line. The semicolon goes directly after the property value without a space.
I usually put a semicolon after each attribute value. Although the rules allow you to not put a semicolon after the last attribute value, it is easy to forget to add a semicolon when adding a new style, which may cause errors, so it is better to add them all.
Finally, put the closing curly brace } on a line of its own. Spaces and line breaks aid readability.

Summarize

The above is the naming rules of DIV+CSS that the editor introduced to you, which is conducive to the implementation method of SEO optimization. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!