Share div+css front-end naming rules

When we develop CSS DIV web pages, the most confusing and tangled thing is CSS naming. Especially newbies don’t know how to name it and often feel that they are short of words. Next, I will talk to you about div css front-end Friends who need it can refer to the naming rules. I hope it will be helpful to you.

Front-end layout specification details

1. Naming specification:

1. Basic requirements:

1) File The encoding uniformly uses UTF-8 encoding;

2) When naming, take semantics as the main reference indicator, CSS attribute writing standards, and adopt a unified style and naming method;

3) Clear structure and hierarchy The relationship is clear, with no more than three levels as the standard;

4) The style requirements of the same expression can be reused, and the style requirements of the module component class can be transplanted externally as a whole;

5) Write CSS When using CSS Hacks, you should avoid using them if you can.

6) All pages are designed by default for browsers that are closest to standards such as Firefox, and then use IE's unique conditional comment function to make targeted corrections.

7) Please use English for naming and try to avoid using pinyin. Naming should be readable and abbreviations should be avoided as much as possible. Although numbers are allowed in naming, numeric naming should be avoided as much as possible.

2. Naming method A unified naming method is required. Commonly used naming methods are:

1) Serial nomenclature, such as: helloworld

2) Midline nomenclature, such as: hello-world (this method is currently used by many, and it is recommended)

3) Underline nomenclature, such as hello_world

4) Camel nomenclature, such as helloWorld

5) Pascal nomenclature, such as HelloWorld

6) Other methods.

3. Style file naming convention is as follows:

Global: global.css;

Main: master.css;

Layout and layout: layout.css;

Columns: columns.css;

Text: font.css;

Print style: print.css;

Theme: themes .css;

Patch: pacth.css;

Format browser: base.css, etc.

4. Common names for ID and Class naming

Header of page: header

Login bar: login-bar

Logo: logo

Sidebar: side-bar

Advertisement: banner

Navigation: nav

Sub-navigation: sub-nav

Menu: menu

Sub-menu: sub-menu

Search: search

Scroll: scroll

Page body: main

Content: content

Tag page: tab

Article list: list

Prompt message: msg

Tips: tips

Column title: title

Join: joinus

Guide: guild

Service: service

Hot spot: hot

News: news

Download: download

Registration: regsiter

Status: status

Button: btn

Vote: vote

Partner: partner

Friendly link: friendlink

Copyright: copyright

Coat: wrap

Footer: footer

Title: title

Top navigation ：top-nav（mini-nav）

The above is the detailed content of Share div+css front-end naming rules. For more information, please follow other related articles on the PHP Chinese website!