CSS Naming conventions

This digest from http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html

CSS Naming conventions

Head: Header

Content: Content/containe

Tail: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Middle: Left Right center

Login Strip: Loginbar

Logo: Logo

Ad: Banner

Page body: Main

Hotspot: Hot

Press: News

Download: Download

Sub-navigation: Subnav

Menus: Menu

Sub-menu: submenu

Searches: Search

Links: Friendlink

Footer: Footer

Copyrights: Copyright

Scrolling: Scroll

Contents: Content

Tabs page: Tab

Article List: List

Hint Message: MSG

Tip: Tips

Column Title: Title

Join: Joinus

Guide: Guild

Services: Service

Registration: Regsiter

State: Status

Vote: Vote

PARTNER: Partner

Naming of IDs in XHTML files

(1) Page structure

Container: Container

Page Header: Header

Content: Content/container

Page body: Main

Page End: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

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

Menus: Menu

Sub-menu: submenu

Caption: Title

Abstract: Summary

(3) function

Logo: Logo

Ad: Banner

Login: Login

Login Strip: Loginbar

Registration: Regsiter

Searches: Search

Functional area: Shop

Caption: Title

Join: Joinus

State: Status

Button: BTN

Scrolling: Scroll

Tabs page: Tab

Article List: List

Hint Message: MSG

Present: Current

Tip: Tips

Icons: Icon

Note: note

Guide: Guild

Services: Service

Hotspot: Hot

Press: News

Download: Download

Vote: Vote

PARTNER: Partner

Links: Link

Copyrights: Copyright

Naming rules for Css+div:

Login Strip: Loginbar
Logo: Logo
Sidebar: SideBar
Ad: Banner
Navigation: Nav
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Searches: Search
Scrolling: Scroll
Page body: Main
Contents: Content
Tabs page: Tab
Article List: List
Hint Message: MSG
Tip: Tips
Column Title: Title
Links: Friendlink
Footer: Footer
Join: Joinus
Guide: Guild
Services: Service
Hotspot: Hot
Press: News
Download: Download
Registration: Regsiter
State: Status
Button: BTN
Vote: Vote
PARTNER: Partner
Copyrights: Copyright

The naming of 1.CSSID
Jacket: Wrap
Main navigation: Mainnav
Sub-navigation: Subnav
Footer: Footer
Entire page: Content
Headers: Header
Footer: Footer
Trademark: Label
Caption: Title
Main navigation: Mainnav (GLOBALNAV)
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Flag: Logo
Slogan: Banner
Menu Content 1:menu1content
Menu Capacity: Menucontainer
Sub-menu: submenu
Edge navigation icon: Sidebaricon
Note: note
Breadcrumbs: breadCrumb (i.e. navigation tips for page location)
Container: Container
Contents: Content
Searches: Search
Login: Login
Functional area: Shop (e.g. shopping cart, cashier)
The current

2. style file naming
Main: Master.css
Layout page: Layout.css
Rubric: Columns.css
Text: Font.css
Plot style: Print.css
Theme: Themes.css

Description: Both class and need to be expanded, the name is customized with the "_" (underscore) suffix within the current name.
I used to call the list page, the news list is newslist, the picture list is piclist,
The content page is view,
/**/
Overall Big frame: #wrapper
Inside the big frame: #inwrapper
/////////////////////////////////////////////////////////////////////////////////////////////////////////
Top and Banner:.top
Top and inside of banner:. Intop
Logo:.logo
Banner:.banner
Navigation:. Menu
Inside Navigation:. Inmenu
. Menuul
. Menuul Li
. Menuul Li A
Drop-down menu:. Inmenu_xiala
. Inmenu_xialaul
. Inmenu_xialaul Li
. Inmenu_xialaul Li A
///////////////////////////////////////////////////////////////////////////////////////////////////////////
Main content:. mainwrapper
Within the main content:. inmainwrapper
Left stop:. Sideleft
Inside left:. insideleft
Right column:. sideright
Right inside:. Insideright
Middle:. Sidecenter
In the middle:. Insidecenter
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
Bottom:. Foot
Bottom inside:. infoot
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Other names */
Search:. Search
Search within:. Insearch
Search bar:. Searchselect
Search button:. serachbuttom
Enter text box:. Input
. Select

/* Table Style */
Table Overall framework:. ListBox
Width of table:. listbox-table
Table Header Text style:. Listbox-header
Table Body Text style:. listbox-entry
/* Universal Type */
General:. gm/* This is a bit depressed, English is too poor ... * *
In general:. Ingm
Universal left float:. GMFL (GM FLOAT left)
Universal right float:. GMFR (GM FLOAT right)
/* General Picture Style */
Common picture styles:. img
/* Clear FLOAT */
Clear all floats:. Clear
Clear left float:. clearleft
Clear right float:. clearright
/* Text Style */
Text:. Font
/* News list */
News list:. fontnews
/*view page Font Total style */
View page font:. Fontview

Trademark: Label
Caption: Title
Main navigation: Mainbav (GLOBALNAV)
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Flag: Logo
Slogan: Banner
Menu Contents 1:MENU1 Content
Menu Size: Container
Sub-menu: submenu
Edge navigation icon: Sidebaricon
Note: note
Breadcrumbs: breadcrumb (i.e. navigation tips for page location)
Container: Container
Contents: Content
Searches: Search
Login: Login
Functional area: Shop (e.g. shopping cart, cashier)
The current
Header: Masthead
Summary, summary summary or general
Floating photo on the left Photoleft
Floating picture on the right photoright
Titles Title
Entry Bottom Entrybottom
More extended or. more
Container background CONTAINERBG
Services Service
Service Link ServiceLink
Line lines
Textual text
Right Rightside
Copyright
Press News
Book Wrapper
Introduction Intro-part1
Columns column
Path pathways
Piece section
Modular Module
On the navigation Subnav
2. Also the annotations that are available when editing the stylesheet can be written like this:

<--Footer--
Content Area
<--End Footer--

3. style file naming

The main master.css
Layout, Layout layout.css
Column Columns.css
Text Font.css
Print style Print.css
Theme Themes.css

4. Annotation in the style sheet
Instance One
/* GLOBAL---------------------------*/
/* LINKS---------------------------*/
/* FORMS---------------------------*/
/* IDS---------------------------*/
/* HEADER---------------------------*/
/* COLUMN 1---------------------------*/
/* COLUMN 2---------------------------*/
/* CLASSES---------------------------*/

Example Two

Html

Example three (NetEase)

Css
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
. keyword
#MallArea
#city
#aboutus

........................
Common naming

Includes wrapper and container
Header header or abbreviation for HD
Footer footer or abbreviated as FT
Nav Nav
You are here breadcrumbs
Second-level navigation Sub_nav
Side bar Sidebar or side-column
Modular Module

Naming rules in the database

Database involves character rules

With 26 letters (case-sensitive) and 0-9 of these 10 natural numbers, plus the underscore _, a total of 63 characters. No other characters (except annotations) can appear.

Database object naming rules

database objects include tables, views (queries), stored procedures (parameter queries), Functions, constraints. The name of the object consists of a prefix and a real name, not exceeding 30. Prefix: Use lowercase letters.

Example: Table-TB view-vi stored procedure-sp function-fn

Actual name

The actual name describes the contents of the entity as much as possible, consisting of words or words, the first letter of each word capitalized, the other letters lowercase, not the numbers and _.

Example: Table user_info view userlist stored procedure Userdelete

Therefore, the legitimate object name is similar to the following.

Table Tbuser_info, Tbmessage_detail

View Vi_messagelist

Stored Procedure Sp_messageadd

database table naming rules

The field consists of a prefix and a real name. The first word in the actual name one system tries to take the same word.

Prefix: Use the lowercase letter TB, which represents the table.

Example: Tbmember tbmember_info tbforum_board Tbforum_thread1

Field Naming conventions

Numbers, characters, dates/times, lobs (large objects), miscellaneous, fields consist of short, underlined, actual names and suffixes of the table.

Suffix: Use lowercase letters, which represent the properties of the field.

Example: User_idint user_namestr User_regdatedtm

View naming rules

A field consists of a prefix and an actual name, with an underscore connected in the middle.

Prefix: Use the lowercase letter vi to represent the view.

Example: Vi_user vi_userinfo

Stored procedure naming rules

A field consists of a prefix and an actual name, with an underscore connected in the middle.
Prefix: Use the lowercase SP, which represents the stored procedure.
Example: Sp_user

Database design Document Rules

All database designs are written as documents, and the documents are expressed in a modular format. The approximate format is as follows:

‘-------------------------------------------

' Table name: Tbuser_info

' Founding man: Uam_richard

' Date: 2004-12-17

' Version: 1.0

' Description: Save user profile

' Specific content:

' UserId int, automatic incremental user code

' UserName char (12) User name

‘　　......

‘--------------------------------------------
Naming conventions in CSS classes and IDs

Web developers can identify the div and other formatting page elements by creating CSS classes and ID names and using these names. For developers, when naming a CSS selectors that redefine XHTML markup (tags), it must be guaranteed to match the predefined markup exactly, but in terms of the class and the ID selector name, the benevolent see. However, it is not a good practice to name these classes and IDs at will.

1. Intuitive naming

When designing a Web page and the need to identify a div, the most natural idea is to name it using words that describe the location of the page where the element is located.

Example: Top-panel

Horizontal-nav

Left-side

Center-column

Right-col

These are the valid names for CSS and XHTML classes and IDs. These words are simple and can be as the name implies, thus satisfying the need to identify page elements and corresponding CSS styles.

The problem is that such a name is associated with the specific expression of the page content. These names refer to the location of page elements in a particular page layout, so using them outside of this layout can be inappropriate or even confusing. These names do not involve the structure of the document content. Therefore, a better way to name CSS classes and IDs is given below.

2. Structured naming

These are the valid names for CSS and XHTML classes and IDs. These words are simple and can be as the name implies, thus satisfying the need to identify page elements and corresponding CSS styles. These are the valid names for CSS and XHTML classes and IDs. These words are simple and can be as the name implies, thus satisfying the need to identify page elements and corresponding CSS styles.

Tagged information is used to describe the structure of a document rather than its appearance. This feature allows us to reuse content and markup (markup) in different skin formats by simply changing the way CSS is used. When you understand this approach, it's easy to find that using the page location to name the class and ID is a very inappropriate way to handle the appearance of formatting such as audio. Therefore, the class and ID should be structured to be named based on the purpose of use in the document rather than where it appears.

You can name the class and the ID name in a structured manner as follows:

Example: Branding

Main-nav

Subnav

Main-content

Sidebar

These names are as easy to understand as intuitive naming, but they describe the role of page elements rather than their location. This makes the code more consistent with the original intention of using purely structured markup (structural markup), where developers can manipulate the display format of a wide variety of media without changing the tag.

Even if you don't plan to format your Web pages in other media, using structured naming can help you make it easier to upgrade or redesign your site later. For example, structured naming avoids the confusion that occurs when a div with ID right-column moves to the left of the page. This naming of Div sidebar is more appropriate because the name is still intuitive to developers, no matter which side of the page it appears on.

3. Convention

Andy Clarke analyzed 40 of the source code for Web sites designed by developers who respected the concept of standardized web design. Although the class and ID names are not uniform, some frequently used names are found. A list of examples of the most common class/id names is given here:

Example: Header

Content

Nav

Sidebar

Footer

3. Member-based naming conventions
Member-based naming conventions refer to the subordinate relationships of files and folders, which are named by the method of classification, which makes the arrangement of files more logical.
For example: A picture file is "file_on" before the mouse click. and the picture file after the click is named "File_off" according to this category. More clarity.

4. Attribute-based naming conventions
For example: Decorative small pictures according to "< picture content description >_< color >_< picture size >_< serial number >.*" to show. This is "heart_red_401*334_1.jpg".

5. Ordinal-based naming conventions
In the Web page generally in order to reduce the download time of the picture is divided into a small part, the formation of a whole picture. You can then name the two-dimensional array.
For example:

This image is "donghua_11.jpg"

This image is "donghua_12.jpg"

This image is "donghua_21.jpg"

This image is "donghua_22.jpg"

These compose a picture.

6. Enumeration-based naming conventions

The first one is "ddd_cemian.jpg" for the side of the book.
The second one for the book is "Ddd_fengpi.jpg"
The third is "ddd_fengdi.jpg" for the back cover of a book.

There are also the site of the appreciation of the different size, can be viewed according to the user's wishes.

For example: "Ddd_cemian_401*334.jpg" and "ddd_cemian_1024*768.jpg"

These are for everyone to build website reference.

To avoid code conflicts (which will make your code more generic), use the nomenclature, which is a good programming habit. Well, here are some common rules.

CSS Naming conventions