CSS Common naming

In the front-end development, the specification uses the DIV+CSS name, may enhance the team cooperation to improve the development efficiency, facilitates the post-page maintenance and the optimization.

1. Page Structure

Wrap: Coat, wrap, for outermost layer.

Wrapper: Jacket for the page perimeter control overall layout width.

Box: boxes, containers.

Header: Head, for the page header section.

Nav: navigation, master navigation.

Main: Primary area, content body.

　　Content/container: Content, Content container.

Sidebar: Side bar.

Footer: Bottom, for footer section.

2. Function Block

Left Center: Right

Main-left: Main layout on the left.

　　Main-right: The main layout on the right.

Logo: Website logo logo.

Search: Searches the input box.

Loginbar: Login Bar.

Regsiter: Register the module.

Banner: Advertising, used for banner ad strips.

Menu: Menus.

　　Submenu: Sub-menu, Level two menu.

Top: Tops.

Topnav: Top navigation.

Mainnav: Main navigation.

　　Subnav: Sub-navigation, level two navigation.

Leftsidebar: Left navigation.

Rightsidebar: Right navigation.

Topbar: Top Tool/Menu.

Bottom: Bottom.

Bottombar: Bottom toolbar.

　　Tool: Toolbar.

　　Shop: Functional area, such as shopping cart, cashier.

3. Other commonly used names

Title: Column headings.

　　Summary: Abstract.

　　Hot: Popular hot news, recommended.

Msg: Prompt information.

　　News: Press.

List: Lists, List of articles.

Piclist: Picture list.

Newslist: News list.

Search-output: Search output.

Search-results: Search results.

　　Drop/dropdown: Drop down.

　　Dropmenu/dorpdown-content: Drop-down menu.

　　Scroll: Scrolling.

　　Homepage: Home.

　　Subpage: Sub-page, level two page.

　　Tag: Tag.

　　Tab: tab page.

Tips: Tips.

Ranking: Ranking.

Vote: Vote.

BTH: button.

Icon: Icons.

　　Arr/arrow: Arrow.

　　Status: State.

　　Note: note.

　　Skin: Skins.

　　Current: Present.

Active: Dynamic, effective.

Download: Download.

Friendlink: Friendship link.

Copyrights: Copyright information.

PARTNER: Partner.

Joinus: Join us.

Sitemap: Sitemap.

Siteinfo: Website information.

Siteinfolegar: Legal Notice.

Announcement: Announcement.

Guild: Guide.

Service: Services.

　　Promotion: promotion.

Blog: Blogs.

　　Forum: Forums.

4, product-related naming

Keyword: keywords.

　　Products: Product.

　　Products-prices: Product price.

　　Products-description: Product Description.

　　Products-review: Product Reviews.

　　Editor-review: Edit comments.

　　News-products: the latest product.

　　Publisher: Manufacturer.

　　Screenshot: Thumbnail image.

　　FAQs: frequently asked questions.

Barnding: Trademarks.

Pay: Recharge.

Reputation: credibility.

5. Commonly used file naming

Global Style: Global.css

Layout structure: Layout.css

　　Basic common use: Base.css

Comprehensive style: Style.css

Main: Master.css

Module: MODULE.CSS

Form: Forms.css

Theme/Web page skin change: Themes.css

Font: FONT.CSS

Printed: Print.css

Patch: MEND.CSS

Private style/Standalone page, according to the actual situation, you can customize the name of the CSS file.

These commonly used file names, do not need to use all, according to the actual situation, each page reference not more than 3 CSS files.

6. ID and Class naming specification

(1), main, important, special, outermost boxes are named with the ID attribute, others are named with the class attribute.

(2), the naming rules must be content first, performance supplemented. First, according to the content to be rendered, the function to name, if the content is really unable to find the appropriate name, can be named after the performance.

(3), most of the time, the name of the use of English words, you can increase the readability of the code, in favor of the maintenance and optimization of the page, but in special cases, can not find the right word, you may use pinyin name, but must be concise, clear structure.

(4), ID and Class name as far as possible all use lowercase, multiple words can use a hyphen (-) Link, the name can use numbers, but not to start with a number.

(5), the name may use the word abbreviation, but must ensure is the valid abbreviation, namely others can understand, cannot customize the abbreviation.

CSS Common naming