CSS naming and writing specification
sadasdasdwqw 2021-08-02 15:45:43

css Naming and writing standards

CSS Naming specification

One . File naming conventions

Global style :global.css;

Frame layout :layout.css;

Font style :font.css;

Link style :link.css;

Print style :print.css;

Two . Common classes /ID Naming specification

page eyebrow :header

Inside Rong :content

Rong device :container

page foot :footer

edition power :copyright

guide navigation :menu

Main navigation :mainMenu

Sub navigation :subMenu

mark Records :logo

mark language :banner

mark topic :title

Sidebar :sidebar

chart mark :Icon

notes Interpretation of the :note

search Cable :search

Press button :btn

deng record :login

chain Pick up :link

Message box :manage


The naming of common classes should be based on common English words as far as possible , Make it easy to understand , And annotate where appropriate . For secondary classes /ID name , The mode of combined writing , The first letter of the last word should be capitalized : Such as “ Search box ” Should be named “searchInput”、“ Search icon ” Name this “searchIcon”、“ Search button ” Name it “searchBtn”……

CSS Writing standards and methods

One . Conventional writing standards and methods

1. choice DOCTYPE:

XHTML 1.0 There are three kinds of DTD The statement is optional :

Transitional (Transitional): The requirements are very relaxed DTD, It allows you to continue to use HTML4.01 The logo of ( But in line with xhtml Writing ). The complete code is as follows :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

Strict (Strict): Demanding DTD, You can't use any of the presentation layer's identities and attributes , for example <br>. The complete code is as follows :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “ http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

Framework of the (Frameset): Designed for frame pages DTD, If your page contains frames , We need to use this DTD. The complete code is as follows :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “ http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

The ideal is, of course, strict DTD, But for most of us who have just come into contact with web For a standard designer , Transitional DTD(XHTML 1.0 Transitional) Ideal for the moment ( Including this site , It is also transitional DTD). Because of this DTD It also allows us to use the identity of the presentation layer 、 Elements and attributes , It's easier to get through W3C Code verification of .

2. Specify language and character set :

Specify the language for the document :

<html xmlns=” http://www.w3.org/1999/xhtml” lang=”en”>

In order to be correctly interpreted and passed by the browser W3C Code verification , be-all XHTML Documents must declare the coding language they use ; Such as :

Common language definitions :

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

The standard XML Document language definition :

<?xml version=”1.0″ encoding=” utf-8″?>

Language definition for older browsers :

<meta http-equiv=”Content-Language” content=” utf-8″ />

To improve the character set , The proposal USES “utf-8”.

3. Call the stylesheet :

External stylesheet calls :

Page embedding : Is to write the style sheet directly in the page code head District . Such as :

<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>

External call usage : Write the style sheet in a separate .css In file , Then on the page head The area calls... With code similar to the following .

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

In conformity with web In standard design , External calling is recommended , You can only modify... Without modifying the page .css File and change the style of the page . If all pages call the same stylesheet file , Then change a style sheet file , You can change the style of all files .

4、 Choose the right elements :

Select according to the structure of the document HTML Elements , Not based on HTML Element style . for example , Use P Element to contain text paragraphs , Not for line breaks . If the appropriate element cannot be found when creating the document , You can consider using a generic div Or is it span;

Avoid excessive use of div and span. A few 、 Use properly div and span Element can make the structure of the document clearer and more reasonable and easy to use style ;

Use as few tags and nested structures as possible , This not only makes the document structure clear , At the same time, it can also keep the file small , While improving users' download speed , It is also easy for the browser to interpret and view documents ;

5、 descendent selector :

You can use derived selectors to define styles for child elements in an element , While simplifying the naming, it also makes the structure more clear , Such as :

.mainMenu ul li {background:url(images/bg.gif;)}

6、 Auxiliary pictures are processed with back image :

there ” Auxiliary picture ” It refers to those that are not part of the content to be expressed on the page , It's just used to decorate 、 interval 、 Pictures of reminders . Make a back image , You can use... Without changing the page CSS Style to make changes , Such as :

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

7、 Separation of structure and style :

Write only the structure of the document in the page , Instead, write the style in css In file , By external call CSS Style sheet to realize the separation of structure and style .

8、 Structured writing of documents :

page CSS All documents should be written in a structured way , Logic is clear and easy to read . Such as :

<div id=”mainMenu”>


<li><a href=”#” > home page </a></li>

<li><a href=”#” > Introduce </a></li>

<li><a href=”#” > service </a></li>



/*===== Main navigation =====*/

#mainMenu {



background:url(images/mainMenu_bg.jpg) repeat-x;


#mainMenu ul li {






/*===== End of main navigation =====*/

9、 Mouse gestures :

stay XHTML In the standard ,hand Only be IE distinguish , When you need to convert the mouse gesture to “ Hand shape ” when , Will “hand” Replace with “pointer”, namely “cursor:pointer;”

Two . Note writing specification

1、 Inter line notes :

Write directly after the attribute value , Such as :


border:1px solid #fff;/* Define the search input box border */

background:url(../images/icon.gif) no-report #333;/* Define the background of the search box */


2、 The whole note :

Add notes at the beginning and end respectively , Such as :

/*===== Search bar =====*/

.search {

border:1px solid #fff;

background:url(../images/icon.gif) no-repeat #333;


/*===== End of search bar =====*/

3、 ... and . Style attribute code abbreviation

1、 Different classes have the same attribute and attribute value abbreviations :

For two different classes , But when there are some or even all of the same attributes and attribute values , They should be combined and abbreviated , Especially when there are multiple different classes with the same attributes and attribute values , Merging abbreviations reduces the amount of code and is easy to control . Such as :

#mainMenu {


border:1px solid #333;





#subMenu {


border:1px solid #333;





Two different attribute values have duplicates , Just can be abbreviated as :

#mainMenu,#subMenu {


border:1px solid #333;




#mainMenu {height:30px;}

#subMenu {height:20px;}

2、 Abbreviation for the same attribute :

The same attribute can also be abbreviated according to its attribute value , Such as :

.search {



background-repeat: no-repeat;

background-position:50% 50%;


.search {

background:#333 url(../images/icon.gif) no-repeat 50% 50%;


3、 Abbreviation for inner and outer borders :

stay CSS The distance between the inner and outer borders in the is in accordance with the above 、 Right 、 Next 、 In left order , When these four attribute values are different, they can also be abbreviated directly , Such as :

.btn {










Can be abbreviated to :

.btn {

Margin:10px 8px 12px 5px;

Padding:10px 8px 12px 5px;


And if you're above and below 、 The border property values on the left and right are the same , The attribute value can be directly abbreviated to two , Such as :

.btn {






Abbreviation for :

.btn {margin:10px 5px;}

When the property values of the top, bottom, left and right borders are the same , Can be directly abbreviated to a , Such as :

.btn {






Abbreviation for :


4、 Abbreviation for color value :

When RGB When the three color values are the same , Abbreviated color value code . Such as :

.menu { color:#ff3333;}

It can be abbreviated as :

.menu {color:#f33;}

Four .hack Writing norms

Because different browsers pair W3C Standard support is different , Each browser's interpretation of the page is also different , such as IE In many cases, it is related to FF There is 3px The gap between , For these differences , We need to make use of css Of hack To adjust , Of course, when it's not necessary , Better not write hack To adjust , Avoid it because hack And cause problems on the page .

1、 IE6、IE7、Firefox Compatible writing between :

Writing a :

IE Can recognize *; Standard browser ( Such as FF) Can't identify *;

IE6 Able to identify *, But I can't recognize !important,

IE7 Able to identify *, Can also recognize !important;

FF Can't identify *, But recognize !important;

According to the above expression , The same kind /ID Under the CSShack Can be written as :

.searchInput {

background-color:#333;/* All three are OK */

*background-color:#666!important; /* only IE7*/

*background-color:#999; /* only IE6 And IE6 following */


Generally, the writing order of the three is :FF、IE7、IE6.

Write two :

IE6 Recognizable “_”, and IE7 And FF Can't recognize , So when only for IE6 And IE7 And FF The difference between , But it can be written like this :

.searchInput {

background-color:#333;/* Universal */

_background-color:#666;/* only IE6 Recognizable */


Write three :

*+html And *html yes IE Unique labels , Firefox Temporary does not support .

.searchInput {background-color:#333;}

*html .searchInput {background-color:#666;}/* only IE6*/

*+html .searchInput {background-color:#555;}/* only IE7*/

shielding IE browser :

select The selector is , Change according to the situation . The second sentence is MAC On safari Browser specific .

*:lang(zh) select {font:12px !important;} /*FF For the exclusive use of */

select:empty {font:12px !important;} /*safari so */

IE6 Recognizable :

This is mainly through CSS Annotations separate a property from a value , Comment before colon .

select { display /*IE6 Don't recognize */:none;}

IE Of if Conditions hack How to write it :

be-all IE Recognizable :

<!–[if IE]> Only IE <![end if]–>

Only IE5.0 Can identify :

<!–[if IE 5.0]> Only IE 5.0 <![end if]–>

IE5.0 Make a change IE5.5 Can recognize :

<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>

only IE6 Recognizable :

<!–[if lt IE 6]> Only IE 6- <![end if]–>

IE6 as well as IE6 Following IE5.x Can recognize :

<!–[if gte IE 6]> Only IE 6/+ <![end if]–>

only IE7 Recognizable :

<!–[if lte IE 7]> Only IE 7/- <![end if]–>

2、 Remove the floating :

stay Firefox in , When all children are floating , Then the height of the parent cannot completely cover the whole child , Then use this to clear the floating HACK To define a parent , Then we can solve this problem .

select:after {







———————– Split line ———————

Affirming : Some data of this paper are collected on the Internet !

XHTML-CSS Writing suggestion

1.  be-all xhtml The code is lowercase

2.  The value of the property must be in double quotation marks ("") Cover up , And it must have value

3.  Every label has to have a beginning and an end , And have the right level

4.  An empty element has to have an end tag Or at the beginning of tag Add after "/"

5.  Performance and structure are completely separated , No representation elements are involved in the code , Such as style、font、bgColor、border etc.

6. <h1> To <h5> The definition of , We should follow the principle from big to small , Reflect the structure of the document , And it's good for the search engine .

7.  Add a unique... To each form and form 、 Structural markings id

8.  Annotate important blocks , Such as : Add... To the picture alt label

9.  All tags must be reasonably nested

10.  The root element must be preceded by an element , Declare which kind of DTD

11.  The root element must have xmlns Property to specify the use of  http://www.w3.org/1999/xhtml  Of namespace

CSS Style sheet specification :

1. id and class The English word or combination of this section shall be used for naming , And the first word is lowercase , The first letter of the second word is capitalized , Such as :newRelease( Latest products /new+Release)

2. CSS Each block of the style sheet is annotated

3.  Try to use English naming principles as much as possible

4.  Try not to center bar and underline

5.  Try not to abbreviate , Unless you can understand the words at a glance

CSS Naming specification :


CSS name        explain


Website public related

Container div






Header or banner div

#head, #header

Header part

Footer div

#foot, #footer

Footer section

Navigation list


Main navigation

Sub-navigation list


Secondary navigation




Sub Menu


Sub menu

Left or right side columns

#sidebar_a, #sidebar_b

The left or right column

Main div


Page body





#msg #message

Prompt information







Friend Link


Friendship connection







Search input


Search input box

Search output


The search output is similar to the search results



Search for

Search bar


Search bar

Search results


The search results

Copyright information


Copyright information







Site information


Website information

Copyright information etc.


A legal statement

Designer or other credits



Join us


Join us

Partnership opportunities















Website map


Website map




Home page


home page

Sub page


Secondary page sub page


#tool, #toolbar


Next pulls


The drop-down

Next pulls menu


The drop-down menu





Please bring the original link to reprint ,thank
Similar articles