CSS selector naming rules: differences and possible problems

Article Introduction: in the 4.1.3 section of the CSS2.1, it is mentioned that identifiers (including element names in selectors, classes and IDS) can only contain characters [a-za-z0-9] and ISO 10646 character encoding u+00a1 and above, plus hyphen (-) and underscore (_); Or a hyphen followed by a number to begin with. They can also contain an escape character plus any ISO 10646 character as a number

Operating system version: Windows 7

Browser version: Ie6,ie7,ie8,firefox 3.6.2,safari 4.0.4,chrome 5.0.356.2 Dev

Affected browsers: all browsers.

Often talk about CSS selector naming rules, in fact, not only on the basis of teamwork, each browser, ie products, Firefox, Apple, Google, because the naming is not standard will produce different styles.

One, about the name of selector

In the 4.1.3 section of the CSS2.1, it is mentioned that identifiers (including element names in selectors, classes and IDS) can only contain characters [a-za-z0-9] and ISO 10646 character encoding u+00a1 and above, plus hyphen (-) and underscore (_); Or a hyphen followed by a number to begin with. They can also contain an escape character plus any ISO 10646 character as a numeric encoding.

Due to the number of characters designed, this article is only for the character [a-za-z0-9], plus hyphen (-) and underscore (_) for discussion. For information about the characters and capitalization that is allowed in CSS, refer to section 4.1.3 of the CSS2.1.

Ii. differences and possible problems

In the CSS2.1 documentation, only the selector identifier cannot begin with a number, or a hyphen followed by a number. In addition, there is no relevant explanation. So does the performance of browsers follow this rule?

Please observe the following code:

div{width:160px;height:20px;font-size:12px;line-height:20px;background- color:yellow;}
 
.f-1_f_{background-color:#d4d4d4;}
 
.1{background-color:#A8A8A8;}
 
.123456{background-color:#d4d4d4;}
 
.2demo{background-color:#A8A8A8;}
 
.2-demo {background-color:#d4d4d4;}
 
.2_demo {background-color:#A8A8A8;}
 
.-demo{background-color:#d4d4d4;}
 
.-2demo {background-color:#A8A8A8;}
 
._demo {background-color:#d4d4d4;}
 
._2demo {background-color:#A8A8A8;}
 
.-{background-color:#d4d4d4;}
 
.---{background-color:#A8A8A8;}
 
._{background-color:#d4d4d4;}
 
.——{background-color:#A8A8A8;}
 
._-{background-color:#d4d4d4;}
 
.-_{background-color:#A8A8A8;}
 
.-{background-color:#d4d4d4;}
 
.---_{background-color:#A8A8A8;}
 
.---123{background-color:#d4d4d4;}
 
.__123{background-color:#A8A8A8;}

<div
class = "f-1_f _"> Letters start </ div>
<div
class = "1"> Single number </ div>
<div
class = "123456"> Multiple numbers </ div>
<div
class = "2demo"> beginning of number + [a-z] [A-Z] </ div>
<div
class = "2-demo"> number + starts with "-" </ div>
<div
class = "2_demo"> number + starts with "_" </ div>
<div
class = "-demo"> The hyphen (-) begins + [a-z] [A-Z] </ div>
<div
class = "-2demo"> hyphen (-) + number beginning </ div>
<div
class = "_ demo"> Underscore (_) + [a-z] [A-Z] </ div>
<div
class = "_ 2demo"> Underscore (_) + number starts </ div>
<div
class = "-"> Single hyphen (-) </ div>
<div
class = "---"> Multiple hyphens (-) </ div>
<div
class = "_"> Single underscore (_) </ div>
<div
class = ""> Multiple underscores (_) </ div>
<div
class = "_-"> underscore (_) + hyphen (-) </ div>
<div
class = "-_"> hyphen (-) + underscore (_) </ div>
<div
class = "-"> Multiple underscores (_) + hyphens (-) </ div>
<div
class = "---_"> Multiple hyphens (-) + underscores (_) </ div>
<div
class = "--- 123"> Multiple hyphens (-) + numbers </ div>
<div
class = "123"> Multiple underscores (_) + numbers </ div>

Look at the results below the browsers

Observe the table, analyze the performance of each browser, summarized as follows

From the above, we can see intuitively that the name of the selector is supported differently under each browser. Therefore, if the selector's naming is not canonical, it will affect the style rendering inconsistencies under each browser. For example, the following code:

div{font-size:12px;background-color:yellow;width:150px;height:30px;line- height:30px;}
.20fontsize{font-size:18px;background-color:#d4d4d4;}

<div
class = "20fontsize"> Class names that begin with a number </ div>

Class names starting with numbers are recognized only under IE6 (q)/ie7 (q)/IE8 (q) and are not recognized under other browsers (ignoring the rule)

Iii. how to avoid being affected by this problem

insists on naming selectors at the beginning of the letter, which is guaranteed to be compatible in all browsers.

Four, on the team cooperation of the CSS naming code

Common CSS naming rules

Header: Header

Content: Content/container

Tail: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Left Right Center

Login Bar: Loginbar

Logo: Logo

Advertisement: Banner

Page body: Main

Hotspot: Hot

News

Download: Download

Sub-navigation: Subnav

Menus: Menu

Sub-menu: submenu

Search on: Search

Friendship Link: friendlink

Footer: Footer

Copyrights: Copyright

Scrolling: Scroll

Contents: Content

tab page: Tab

Article listing: List

Tip Message: Msg

Tips: Tips

Column Title: Title

Add: Joinus

Guide: Guild

Services: Service

Registration: Regsiter

State: Status

Vote: Vote

PARTNER: Partner

(ii) The wording of the note:

* Footer * *

Content Area

/* End Footer * *

(iii) name of ID:

(1) Page structure

Container: Container

Page Header: Header

Content: Content/container

Page body: Main

Page End: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Left Right Center

(2) Navigation

Navigation: Nav

Main navigation: MAINBAV

Sub-navigation: Subnav

Top Navigation: Topnav

Edge Navigation: Sidebar

Left navigation: Leftsidebar

Right navigation: Rightsidebar

Menus: Menu

Sub-menu: submenu

Titles: Title

Summary: summary

(3) function

Logo: Logo

Advertisement: Banner

Login: Login

Login Bar: Loginbar

Registration: Regsiter

Search on: Search

Functional area: Shop

Titles: Title

Add: Joinus

State: Status

Button: BTN

Scrolling: Scroll

tab page: Tab

Article listing: List

Tip Message: Msg

Currently: current

Tips: Tips

Icons: Icon

NOTES: note

Guide: Guild

Services: Service

Hotspot: Hot

News

Download: Download

Vote: Vote

PARTNER: Partner

Links: Link

Copyrights: Copyright

(iv) Class name:

(1) Color: Use the name of the color or the 16 code, such as

. red {color:red;}

. F60 {color: #f60;}

. ff8600 {color: #ff8600;}

(2) Font size, directly using "font+ font size" as a name, such as

. font12px {font-size:12px}

. font9pt {FONT-SIZE:9PT}

(3) Alignment style, using the English name of the alignment target, such as

. left {float:left;}

. Bottom {Float:bottom}

(4) title bar style, using the "category + Features" way to name, such as

. Barnews {}

. barproduct {}

Precautions::

1. All lowercase;

2. Use English as much as possible;

3. Do not add the middle bar and underline;

4. Try not to abbreviate, unless a look at the words understood.

The main master.css

Module MODULE.CSS

Basic shared Base.css

layouts, Layout layout.css

Theme Themes.css

Column Columns.css

Text Font.css

Form Forms.css

Patch Mend.css

Print Print.css