CSS naming rules for team collaboration

Source: Internet
Author: User
Tags print print

Common CSS naming rules

Header: Header

Content: content/Container

End: footer

Navigation: nav

Sidebar: sidebar

Column: Column

Overall Layout width of the page peripheral control: wrapper

Left right center

Logon entry: loginbar

Logo: logo

Advertisement: banner

Page subject: Main

Hotspot: hot

News: News

Download: Download

Subnavigation: subnav

Menu: Menu

Sub menu: submenu

Search: Search

Link: friendlink

Footer: footer

Copyright: Copyright

Scroll: Scroll

Content: Content

Tab: Tab

ArticleList: List

Message: msg

TIPS: Tips

Topic title: Title

Join: joinus

Guide: Guild

Service: Service

Registration: regsiter

Status: Status

Vote: Vote

Partner: Partner

(2) Comment writing:

/* Footer */

Content Area

/* End footer */

(3) ID name:

(1) Page Structure

Container: Container

Header: Header

Content: content/Container

Page subject: Main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: Column

Overall Layout width of the page peripheral control: wrapper

Left right center

(2) Navigation

Navigation: nav

Main navigation: mainbav

Subnavigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left Navigation: leftsidebar

Right navigation: rightsidebar

Menu: Menu

Sub menu: submenu

Title: Title

Abstract: Summary

(3) Functions

Logo: logo

Advertisement: banner

Login: Login

Logon entry: loginbar

Registration: regsiter

Search: Search

Functional Area: Shop

Title: Title

Join: 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

Hotspot: hot

News: News

Download: Download

Vote: Vote

Partner: Partner

Link

Copyright: Copyright

(4) Class naming:

(1) color: use the color name or hexadecimalCode, Such

. Red {color: red ;}

. F60 {color: # f60 ;}

. Ff8600 {color: # ff8600 ;}

(2) font size: Use "font + font size" as the name, as shown in figure

. Font12px {font-size: 12px ;}

. Font9pt {font-size: 9pt ;}

(3) alignment style. Use the English name of the alignment target, as shown in figure

. Left {float: Left ;}

. Bottom {float: bottom ;}

(4) use the "category + function" method to name the title bar style, as shown in figure

. Barnews {}

. Barproduct {}

Note ::

1. All are in lower case;

2. Try to use English;

3. Do not add hyphens or underscores;

4. Try not to be abbreviated, except words that can be understood without looking at them.

Main master.css

Module module.css

Basic shared base.css

Layout.css

Themes.css

Columns.css

Text font.css

Form forms.css

Patch mend.css

Print print.css

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.