CSS Naming Convention document

Before any project or system development, you need to customize a development convention and rules, which is conducive to unified overall style of the project, code maintenance and expansion. As Web project development is decentralized, independent, and interactive, it is particularly important to customize a set of complete conventions and rules. Based on the current Guangdong talent network New Version scheme has been fully started, in order to better make the new version of the project can be smoothly and effectively carried out, the following CSS Naming Convention document is formulated.

I. Folder naming rules

The folder name should be in English and generally contain no more than 20 characters. The name should contain lowercase letters. You can use Chinese pinyin only in special cases. The folder name is as follows:
Images (storing graphical files)
Flash (storing Flash files)
Style/css (storing CSS files)
Scripts (storing Javascript scripts)
Link)
Media (storing multimedia files.

Folder structure description: Black-indicates the root directory red-indicates the next level of the root destination blue-indicates the next level of the Directory

Web root folder-website root directory
Company folder-store the Enterprise Management page
Css folder-root directory for storing styles
Base.css-public style of the entire site page
Company folder-Save the style of the enterprise management page
Search folder-Save the style of the search result page
User folder-Save the style on the resume management page
Images folder-root directory for storing images
Company folder-stores images on the Enterprise Management page
User folder-meaning same as above
Flash folder-directory for storing flash animations
Js folder-root directory for storing js
Company folder-stores js on the Enterprise Management page
User folder-meaning same as above
Dpax folder-stores jsp files that process ajax requests
Inc folder-contains common files
Search folder-store the search result page
User folder-store your resume management page
Tm plate folder-storage Template

Ii. Naming rules for file names

The file name must contain lowercase letters, numbers, and underscores. Guiding Ideology of naming principles
First, you and every member of the Working Group can easily understand the meaning of each document,
Second, when we use the "sort by name" command in a folder, files in the same category can be arranged together, so that we can search, modify, replace, and calculate the load.

(1) Naming and writing specifications for images

The name of an image is divided into two parts: the beginning and the end, separated by underscores. the header represents the main category of the image, such as advertising, logo, menu, button, and so on.
The banner is the banner.
The iconic image is named: logo
We name a small image with a link on the page as a button.
On the page, a location appears consecutively. The image of the same link bar is named menu.
The photos used for decoration are named pic.
The image without a link is named title.
The following are examples: banner_sohu.gif, banner_sina.gif, menu_aboutus.gif, {menu_job.gif, title_news.gif, logo_police.gif, and logo_national.gif 、pic_lele.jpg.

(2) css naming and writing specifications

1. Use external calls whenever possible for all css
<Link href = "style/style.css" rel = "stylesheet" type = "text/css">

The first step is redefinition During writing, the second is the pseudo class, and the last step is the custom class (where a: link a: visited a: hover a: actived should be written in order) to facilitate reading by yourself and others.
To ensure that the font size of different browsers is consistent, we recommend that you define the font size using the pt and pixel px. pt generally uses the 9pt and 11pt of the Chinese, px is generally used in Chinese 1212pt and 14.7px. This is the optimized font size. When the bold characters are in black or simplified Chinese, the font size of 11pt and 14.7px is generally used.

2. css recommendation template:
<Style type = "text/css">
<! -
Body {font-size: 9pt; font-family: arial, helvetica, sans-serif; color: #333333; text-align: center; margin: 0px ;}
Ul {margin: auto ;}
Img {border: 0px ;}
A {font-size: 9pt; text-decoration: none; color: # ffffff ;}
A: hover {font-size: 9pt; text-decoration: underline; color: #990000 ;}
A.1 {font-size: 9pt; color: # 3366cc; text-decoration: none}
A.1: hover {font-size: 9pt; color: # ff9900; text-Decoration: None}

. Colorblue, colorblue: hover {color: #003366 ;}
. Blue {font-family: ""; font-size: 9pt; line-Height: 20px; color: # 0099ff; letter-Spacing: 5em}

. Colorred, A. colorred: hover {color: # ff0000 ;}
. Colorlime, A. colorlime: hover {color: #00ff00 ;}
. Colorgreen, A. colorgreen: hover {color: #008000 ;}
. Colorblue, A. colorblue: hover {color: # 0000ff ;}
. Colororange, A. colororange: hover {color: # ffa500 ;}
-->
</Style>
To ensure browser compatibility, you must set the page background <body bgcolor = "# ffffff">

3. annotation writing specifications
A. Line comment:
Directly after the property value, such:
. Search {border: 1px solid # FFF;/* define the border of the search input box */
Background: URL (../images/icon.gif) No-Report #333;/* define the background of the search box */}
B. comments for the entire segment:
Add comments at the beginning and end, for example:
/* = Search Results = */
. Search {border: 1px solid # fff; background: url (../images/icon.gif) no-repeat #333 ;}
/* ===== Search end ===== */
C. Assist in commenting
If it is not maintained by the author, it indicates the modification time, modifier, and other identity information.
Add information such as the modifier and modification time based on the region comment or single line comment.
Example (region comment ):
<! -- = S comment content [modifier and modification time] -->
<Div>... </div>
<! -- = E comment content [modifier and modification time] -->
/* = S comment content [modifier and modification time] */
. Class {...}
. Class {...}
/* = E comment content [modifier and modification time] */
Example (single line comment ):
<Div>
<! -- Comment content [modifier and modification time] -->
...
</Div>
. Class {
/* Comment on the content [modifier and modification time] */
...
}

(2) css naming reference

1. Common css naming rules:
Header: header
Content: content/container
End: footer
Navigation: nav
Sidebar: sidebar
Column: column
..........

2. Intuitive naming

When designing a web page and identifying a div, the most natural idea is to use words that can describe the location of an element's page to name it. In this way, the class and id names are shown below:

Top-down group: top-panel
Horizontal: horizontal-nav
Left: left-side
Center-column: center-column
Right-col
These are the effective naming methods for css, xhtml classes, and IDs. These words are simple and can be used as the name suggests. Therefore, they meet the needs of marking page elements and corresponding css styles.

However, the problem is that such names are associated with the specific expressions of the page content. These naming rules refer to the location of page elements in a specific page layout. Therefore, it may be inappropriate or even confusing to use them outside of such a layout. At the same time, these names do not involve the structure of the document content. Therefore, the following provides a better method for naming css classes and IDs.

3. Structured naming

Structured markup means that the expression/location information is completely separated from the content-including the class and id names that appear in the markup.

The labeled information is used to describe the structure of the document rather than the appearance. This feature allows us to simply change css to reuse content and markup in different formats. When you understand this method, it is easy to find that the method of naming classes and IDS by PAGE location is very inappropriate for processing appearance formats such as audio. Therefore, classes and IDs should be structured based on the purpose of use in the document rather than the location where they appear.

You can name the class and id in a structured manner as follows:
Eye-catching part on the top: branding
Navigation part: main-nav
Main content: main-content

These names are as easy to understand as the intuitive naming method, but they describe the role of the page element rather than the location. This makes the code more consistent with the original intention of using structural markup, that is, developers can process the display formats in various media without changing the markup.
Even if you are not planning to modify the format of web pages on other media, using the structured naming method can also help you easily upgrade or redesign your website in the future. For example, structured naming avoids confusion when a div moves to the left of the page with the same id right-column. This naming method is more appropriate for div sidebar, because the name is still intuitive to the project staff, no matter which side of the page it appears on.

4. custom name:

Based on the w3c website, it is best to use a meaningful name.
For example, it is an important news highlight (like red)
There are two types
. Red {color: red}
. Important-news {color: red}
Obviously, the meaning of the second communication is clearer, so do not use a name that is ambiguous as your own.

Iii. css style Writing Sequence

1. Display attributes
* Display * list-style * position * float * clear

2. Attributes
* Width * height * margin * padding * border * background

3. Text attributes
* Color * font * text-decoration * text-align
* Vertical-align * white-space * other text * content

The above CSS naming rules follow 3c (css 2.1 XHTML1.0 Transitional) standards as much as possible to enhance the level of collaboration among teams to a certain extent, it improves the development efficiency and quality of the project and helps you to write standard code.