In mature product management, it is necessary to define the work processes and standardized operations of personnel in various roles such as product managers, operations specialists, UE/UI designers, and page engineers. Below are the naming rules for div+css used by page engineers during web slicing. This is a backup.
### Content:
- Content/Container: **content/container**
- Navigation: **nav**
- Sidebar: **sidebar**
- Column: **column**
- Logo: **logo**
- Main Body: **main**
- Advertisement: **banner**
- Hot Topics: **hot**
- News: **news**
- Download: **download**
- Sub-navigation: **subnav**
- Menu: **menu**
- Search: **search**
- Footer: **footer**
- Scroll: **scroll**
- Copyright: **copyright**
- Friend Links: **friendlink**
- Sub-menu: **submenu**
- Content: **content**
- Tab: **tab**
- Article List: **list**
- Register: **register**
- Message: **msg**
- Tips: **tips**
- Join Us: **joinus**
- Title: **title**
- Guide: **guild**
- Service: **service**
- Status: **status**
- Vote: **vote**
- Tail: **footer**
- Partners: **partner**
- Login Bar: **loginbar**
- Wrapper (controls overall layout width): **wrapper**
- Left/Right/Center: **left**, **right**, **center**
### (II) Comment Writing Style:
```css
/* Footer */
Content Area
/* End Footer */
```
### (III) ID Naming:
#### 1. Page Structure:
- Container: **container**
- Header: **header**
- Content: **content/container**
- Main Body: **main**
- Footer: **footer**
- Navigation: **nav**
- Sidebar: **sidebar**
- Column: **column**
- Left/Right/Center: **left**, **right**, **center**
- Wrapper (overall layout width control): **wrapper**
#### 2. Navigation:
- Navigation: **nav**
- Main Navigation: **mainnav**
- Sub-navigation: **subnav**
- Top Navigation: **topnav**
- Side Navigation: **sidebar**
- Left Navigation: **leftsidebar**
- Right Navigation: **rightsidebar**
- Menu: **menu**
- Sub-menu: **submenu**
- Title: **title**
- Summary: **summary**
#### 3. Functionality:
- Logo: **logo**
- Banner: **banner**
- Login: **login**
- Login Bar: **loginbar**
- Register: **register**
- Search: **search**
- Functional Area: **shop**
- Title: **title**
- Join Us: **joinus**
- Status: **status**
- Button: **btn**
- Scroll: **scroll**
- Tab: **tab**
- Article List: **list**
- Message: **msg**
- Current: **current**
- Tips: **tips**
- Icon: **icon**
- Note: **note**
- Guide: **guild**
- Service: **service**
- Hot Topics: **hot**
- News: **news**
- Download: **download**
- Vote: **vote**
- Partner: **partner**
- Friend Link: **link**
- Copyright: **copyright**
### (IV) Class Naming:
#### 1. Colors:
Use color names or hexadecimal codes, e.g.,
```css
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
```
#### 2. Font Sizes:
Directly use "font + font size" as the name, e.g.,
```css
.font12px { font-size: 12px; }
.font9pt { font-size: 9pt; }
```
#### 3. Alignment Styles:
Use the English names of alignment targets, e.g.,
```css
.left { float: left; }
.bottom { float: bottom; }
```
#### 4. Title Bar Styles:
Use "category + function" naming convention, e.g.,
```css
.barnews { }
.barproduct { }
```
### Guidelines:
1. All lowercase.
2. Use English whenever possible.
3. Avoid using hyphens or underscores.
4. Avoid abbreviations unless they are immediately clear.
### Main CSS Files:
- Master stylesheet: **master.css**
- Module-specific styles: **module.css**
- Basic shared styles: **base.css**
- Themes: **themes.css**
- Columns: **columns.css**
- Print styles: **print.css**
- Font styles: **font.css**
- Forms: **forms.css**
- Patches: **mend.css**
- Layout: **layout.css**
Relevant article: Why this space is not updated.
This article was reprinted from the fastest rebate website: [http://www.zuikuaifanli.com](http://www.zuikuaifanli.com).