Common naming rules for CSS class, id, and css file names_html/css_WEB-ITnose

Common naming rules for CSS class, id, and css file names

(1) Commonly used CSS naming rules

Header: header

Content: content/container

Tail: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

Left and right center: left right center

Login bar: loginbar

Logo: logo

Advertising: banner

Page body: main

Hotspot: hot

News: news

Download: download

Sub-navigation: subnav carefully developed 5 The UI front-end framework of the year!

Menu: menu

Submenu: submenu

Search: search

Friendly link: friendlink

Footer: footer

Copyright: copyright

Scroll: scroll

Content: content

Tag page: tab

Article list: list

Prompt message: msg

Tips: tips

Column title: title

Join: joinus

Guide: guild

Service : service

Registration: regsiter

Status: status

Voting: vote

Partner: partner

　(2) How to write comments:

　　/* Footer */

　　 Content area

　　/* End Footer */

　(3) ID naming: UI front-end framework carefully developed for 5 years!

(1) Page structure

Container: container

Header: header

Content: content/container

Page body: main

Page footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout Width: wrapper

Left right center: left right center

(2) Navigation

Navigation: nav

Main navigation: mainbav

Sub-navigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left navigation: leftsidebar

Right navigation: rightsidebar

Menu: menu

Submenu: submenu

Title: title

Summary: summary

(3) Function

Logo: logo

Advertisement: banner

Login: login

Login bar: loginbar

Registration: regsiter

Search: search

Ribbon: shop

Title: title

Join: joinus

Status: status UI front-end framework carefully developed for 5 years!

Button: btn

Scroll: scroll

Tab: tab

Article list: list

Prompt message: msg

Current: current

Tips: tips

Icon: icon

Note: note

Guide: guild

Service: service

Hot spot: hot

News: news

Download: download

Vote: vote

Partner: partner

Friendly links: link

Copyright: copyright

(4) Class naming:

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

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) Font size, directly use "font font size" as the name, such as

.font12px { font-size: 12px ; }

.font9pt {font-size: 9pt; }

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

.left { float:left ; }

.bottom { float:bottom; }

(4) Title bar style, named using "category function", such as

.barnews { }

.barproduct { }

Notes::

1. Always lowercase;

2. Try to use English;

3. Do not add dashes or underlines;

4. Try not to abbreviate words unless they are words that are easy to understand at a glance. 5 years of careful development of the UI front-end framework!

Main master.css

Module module.css

Basic common base.css

Layout, layout layout.css

Themes themes.css

Columns.css

Text font.css

Forms forms.css

Patch mend.css

Print print.css

Class or id naming rules in CSS files:

1 ) The starting letters should always be lowercase

2) Try not to use English abbreviations unless they can be clearly understood

3) If you encounter a class or ID that is not much different, the main function identification letter should be in front, and the location identification letter should be in the back. The first location identification letter can be capitalized (such as: navTop, menuLeft)

4 ) You must use the UI front-end framework that has been carefully developed for 5 years starting in English!

CSS file content annotation writing method:

Css file content annotation is uniformly used:

/*

Annotation content

*/

css file storage location:

All css files are stored uniformly, for example, in the style directory under the root directory.