CSS naming convention-HTML Tutorial-php.cn

CSS and DIV naming rules for html pages

CSS Naming Rules

Header: header

　Content: content/containe

　Tail: footer

　Navigation: nav

　 Sidebar: sidebar

　Column: column

　Page peripheral control overall layout width: wrapper

　　left right center

　 Logo: logo

　Advertisement: banner

　Page body: main

　 Hotspot: hot

News: news

　Download: download

　Sub navigation: subnav

　Menu: menu

　Submenu: submenu

Search: search

Friendly link: friendlink

　 Footer: footer

　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

　Vote:vote

　Partner: partner

Naming of ids in XHTML files

(1)Page structure

　Container: container

Head of page: header

　Content: content/container

　Page body: main

　 Footer: footer

　Navigation: nav

　 Sidebar: sidebar

　Column: column

　Page peripheral control overall layout width: wrapper

　　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

　Registration: regsiter

Search: search

　 Ribbon: shop

　Title: title

　Join: joinus

Status: status

　Button: btn

　Scroll: scroll

　Tag page: tab

　Article list: list

　Prompt message: msg

　Current: current

　Tips: tips

　Icon: icon

　Note: note

　Guide: guild

　Service: service

　 Hotspot: hot

News: news

　Download: download

　Vote:vote

　Partner: partner

Friendly links: link

Naming rules for CSS+DIV:

　 Logo: logo

　Sidebar:sideBar

　Advertising:banner

　Navigation:nav

　Sub navigation: subNav

　Menu:menu

　Submenu:subMenu

Search: search

　Scroll:scroll

　Page body:main

　Content:content

　Tab:tab

　Article list:list

　Prompt message: msg

　Tips: tips

　Column title: title

Friendly link: friendLink

　 Footer: footer

　Join: joinus

　Guide:guild

　Service:service

Hotspot: hot

News: news

　Download:download

Status: status

　Button: btn

　Vote:vote

　Partner: partner

　1. Naming of CSSID

Coat:wrap

　Main navigation:mainNav

　Sub navigation: subnav

　 Footer: footer

　 Entire page: content

Header: header

　 Footer: footer

　Trademark: label

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

　Submenu:submenu

Side navigation icon: sidebarIcon

　Note:note

　Breadcrumbs: breadCrumb (i.e. navigation prompts for the location of the page)

　Container:container

　Content:content

Search: search

Functional area: shop (such as shopping cart, cashier)

　Current current

　2. Style file naming

Main: master.css

Layout: layout.css

　Column: columns.css

　Text: font.css

　Print style: print.css

　Theme:themes.css

Note: They are all classes and need to be extended, then customize the name with "_" (underscore) suffix in the current name.

I am used to calling the list page a list, the news list a newslist, and the picture list a piclist,

The content page is view,

/**/

Overall large frame: #wrapper

Inside the big frame: #inwrapper

//////////////////////////////////////////////////// ///////////////////////////////////////////////////// //////

Top and banner: .top

Top and inside the banner: .intop

Logo:.logo

Banner: .banner

Navigation: .menu

Inside navigation: .inmenu

.Menuul

.Menuul li

.Menuul li a

Dropdown menu: .inmenu_xiala

.Inmenu_xialaul

.Inmenu_xialaul li

.Inmenu_xialaul li a

//////////////////////////////////////////////////// ///////////////////////////////////////////////////// ////////

Main content: .mainWrapper

Inside the main content: .inmainwrapper

Left block: .sideleft

Inside left: .insideleft

Right column: .sideright

Inside right: .insideright

Middle: .sidecenter

Inside center: .insidecenter

//////////////////////////////////////////////////// ///////////////////////////////////////////////////// //////////

Bottom: .foot

Inside the bottom: .infoot

//////////////////////////////////////////////////// ///////////////////////////////////////////////////// /////////

/*Other naming*/

Search: .search

Search within: .insearch

Search bar: .searchselect

Search button: .serachbuttom

Input text box: .input

.select

/*Table style*/

The overall frame of the table: .listbox

Width of table: .listbox-table

Table header text style: .listbox-header

Table text style: .listbox-entry

/*Universal type*/

General: .GM/*This is a bit depressing, my English is too poor...*/

General: .INGM

General left float: .GMfl(GM FLOAT LEFT)

General right float: .GMfr(GM FLOAT RIGHT)

/*Universal picture style*/

Universal image style: .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 overall style*/

VIEW page font: .fontview

Trademark: label

Title: Title

Main navigation: mainbav (globalnav)

Top navigation: topnav

Side navigation: sidebar

Left navigation: leftsidebar

Right navigation: rightsidebar

Flag: logo

Slogan: Banner

Menu content 1: menu1 content

Menu capacity: menu container

Submenu: submenu

Side navigation icon: sidebarIcon

Note: 　note

Breadcrumbs: breadcrumbs (i.e. navigation tips for the location of the page)

Container: container

Content: content

Search: Search

Functional area: shop (such as shopping cart, cashier)

current

Masthead: 　　masthead

Abstract, summary summary or general

The floating photo picture on the left photoleft

Floating picture on the right photoright

Title 　　title

Bottom of entry　 entrybottom

more 　 extended or .more

Container background containerbg

Service　 service

Service link　servicelink

line 　　line

text text

rightside

News News

book cover wrapper

Introduction　　intro-part1

column column

pathways

section

module

Up navigation subnav

2. In addition, the comments available when editing the style sheet can be written like this:

<-- Footer -->

Content area

<-- End Footer -->

3. Style file naming

main master.css

Layout, layout.css

Columns columns.css

Text font.css

Print style print.css

themes themes.css

4. Comments in the style sheet

Example 1

/* GLOBAL --------------------------- */

/* LINKS --------------------------- */

/* FORMS --------------------------- */

/* IDS --------------------------- */

/* HEADER --------------------------- */

/* COLUMN 1 --------------------------- */

/* COLUMN 2 --------------------------- */

/* CLASSES --------------------------- */

Example 2

HTML

Example 3 (NetEase)

CSS

#UrsLogin

#LogoNav

#Column

#Content1

#bNav

#Copyright

#UrsLogin

#LogoNav

#SearchArea

#ChannelArea

#HotNews

#NewsCenter

.keyword

#MallArea

#city

#aboutus

……………………

Common naming

Contains wrapper and container

Header or abbreviated as hd

footer or abbreviated as ft

Navigation nav

Your location breadcrumbs

Secondary navigation sub_nav

sidebar sidebar or side-column

module module

Naming rules in database

Database involves character rules

It is composed of 26 English letters (case sensitive) and ten natural numbers from 0 to 9, plus the underscore _, for a total of 63 characters. No other characters (except comments) may appear.

Database object naming rules

Database objects include tables, views (queries), stored procedures (parameter queries), functions, and constraints. The object name consists of a prefix and the actual name, and the length does not exceed 30 characters. Prefix: Use lowercase letters.

For example: table-tb view-vi stored procedure-sp function-fn

Actual name

The actual name should try to describe the content of the entity and consist of words or combinations of words. The first letter of each word should be capitalized and other letters should be lowercase. It should not start with numbers or _.

For example: table User_Info view UserList stored procedure UserDelete

Therefore, the legal object names are similar to the following.

Table tbUser_Info, tbMessage_Detail

View vi_MessageList

Stored procedure sp_MessageAdd

Database table naming rules

Field consists of prefix and actual name. The system tries to use the same word as the first word in the actual name.

Prefix: Use the lowercase letter tb to indicate a table.

For example: tbMember　tbMember_Info　tbForum_Board　tbForum_Thread1

Field naming rules

Numbers, characters, date/time, lob (large object), miscellaneous, fields are composed of the abbreviation of the table, underscore, and the actual name plus a suffix.

Suffix: Use lowercase letters to represent the attributes of the field.

For example: 　User_Idint　　User_Namestr　　User_RegDatedtm

View Naming Rules

The field consists of the prefix and the actual name, connected by an underscore.

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

For example: vi_User　　vi_UserInfo

Stored procedure naming rules

The field consists of the prefix and the actual name, connected by an underscore.

Prefix: Use lowercase letters sp to indicate stored procedures.

For example: sp_User

Database design document rules

All database designs should be written in documents, and the documents should be expressed in modular form. The general format is as follows:

　'------------------------------------------------

　　Table name: tbUser_Info　

　　Created by: UAM_Richard

　　Date: 　2004-12-17

　　Version: 　1.0

　　Description: Save user information

　　Specific content:

　　UserId　int, auto-increment User code

　　UserName　char(12)　User name

　　……

　'-------------------------------------------------

Naming rules in CSS classes and ids

　 Web developers can create CSS classes and id names and use these names to identify divs and other formatted page elements. For developers, when naming CSS selectors that redefine XHTML tags (tags), they must ensure that they accurately match the predefined tags, but when it comes to class and id selector names, it is a matter of opinion. However, it is not a good habit to name these classes and IDs as you wish.

1. Intuitive naming

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

For example: top-panel

　 Horizontal-nav

　Left-side

　center-column

　　right-col

These are valid ways of naming CSS and XHTML classes and ids. These terms are simple and descriptive, thus meeting the need to identify page elements and their corresponding CSS styles.

But the problem is that such a name is associated with a specific expression of the page content. These names refer to the position of page elements within a specific page layout, so their use outside of such a layout would be inappropriate or even confusing. These names have no reference to the structure of the document content. Therefore, here is a better way to name CSS classes and IDs.

2. Structured naming

These are valid ways of naming CSS and XHTML classes and ids. These terms are simple and descriptive, thus meeting the need to identify page elements and their corresponding CSS styles. These are valid ways of naming CSS and XHTML classes and ids. These terms are simple and descriptive, thus meeting the need to identify page elements and their corresponding CSS styles.

Tagged related information is used to describe the structure of the document rather than its appearance. This feature allows us to reuse content and markup in different appearance formats by simply changing CSS. When you understand this method, it is easy to find that using page position to name classes and ids is very inappropriate when dealing with appearance formats such as audio. Therefore, classes and ids should be structured and named based on their purpose in the document rather than where they appear.

You can name classes and id names in a structured way as shown below:

Example: branding

　Main-nav

　subnav

　Main-content

　 Sidebar

These names are as easy to understand as intuitive naming methods, but they describe the role of page elements rather than their location. This makes the code more consistent with the original intention of using pure structural markup, that is, developers can handle display formats in various media without changing the markup.

Even if you don’t plan to format your web pages in other media, using structured naming can help you make future site upgrades or redesigns easier. For example, structured naming avoids confusion when a div with the same id right-column is moved to the left side of the page. Naming the div sidebar this way is more appropriate because no matter which side of the page it appears on, the name is still intuitive and easy to understand for developers.

3. Convention

Andy Clarke analyzed the source code of 40 Web sites designed by developers who advocated standardized Web design concepts. Although the class and id names are very inconsistent, some common names that appear frequently are still found. An example list of the most commonly used class/id names is given here:

For example: header

　content

　nav

　 Sidebar

　footer

3. Member-based naming convention

Member-based naming convention refers to naming files and folders through classification according to their affiliation, which can make the arrangement of files more logical.

For example: a picture file is "file_on" before the mouse click. And the picture file after clicking is named "file_off" according to this category. It is more clear.

4. Attribute-based naming convention

For example: small decorative pictures are represented according to "

5. Naming convention based on ordinal numbers

In web pages, in order to reduce the download time of images, the images are usually divided into small parts to form an overall image. In this case, you can use a two-dimensional array to name it.

For example:

This picture is "donghua_11.jpg"

This picture is "donghua_12.jpg"

This picture is "donghua_21.jpg"

This picture is "donghua_22.jpg"

These form a picture.

6. Enumeration-based naming convention

The first one is "ddd_cemian.jpg" on the side of the book

The second one is the book cover "ddd_fengpi.jpg"

The third one is "ddd_fengdi.jpg" on the back cover of the book

Some websites also have different sizes for viewing pictures, which 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 your reference when building a website.

To avoid code conflicts (which will also make your code more versatile), use naming conventions. This is a good programming habit. Okay, here are some commonly used rules.

◆Name variables, methods, and properties

The first letter of the names of variables, methods, and properties should be capitalized, and the names should express their purpose (or meaning).

Variables

.NET naming

Hungarian naming

Description

Cstring

EmployeeName

szName

Name of an employee.

Int

AttendanceCounter

nCounter

A counter of type long.

Long

NumberOfBytes

lBytes

A long type variable stores bytes.

Sometimes we are used to using underscore "_" in definitions, for example: Add_Data(int a, int b). According to the new naming rules, this is not a good programming habit, although it is not wrong. You should change the definition of Add_Data to AddData. These are not Microsoft standards, and you are not required to follow these rules. However, in some places you will understand the rationale of these laws below.

Personally, I prefer Hungarian nomenclature. Of course, the same rules apply to variables. If you remember the Hungarian nomenclature, a Boolean variable definition starts with "b", for example:

BOOL bFlag = TRUE;

The new rule deprecates the use of Flag and "b":

bool IsFileFound = true;

You can browse MSDN, where there are more instructions about the new rules.

◆Named components and collections (Assemblies)

To avoid code conflicts, it is a good programming habit to name your library (called assembly in .NET) according to the naming convention. Suppose you are from the MindCracker company and you are developing a library for extending the C# database class. It is much better to name it MindCracker.DatabaseAssembly.ADOSet than MyAssembly.Database.ADOSet.

Assume again that your library has a method that reads data from a table and returns a data set. If you named it DataSet return_data(), change it to DataSet ReturnData().

You should also follow a consistent word order in naming. For example, if you have two tables, Employee and Manager, and you define a method for each of them to insert a record into the table, then the method names AppendEmployee and AppendManager are better than AppendEmployee and ManagerAppend.

I prefer the two methods, because it is easy to understand a block structure and nested block structure.

◆Hungarian nomenclature (efoxxx attached)

Hungarian nomenclature was invented by a Hungarian programmer, and he worked at Microsoft for many years. This nomenclature is spread through various Microsoft products and documents. Most experienced programmers, no matter what language they use, use it to some extent

The basic principle of this nomenclature is:

Variable name = attribute + type + object description

That is, a variable name is composed of three parts of information. In this way, programmers can easily understand the type and purpose of the variable, and it is easy to remember.

Below are some examples of recommended rules. You can choose to use them, or you can modify them according to your personal preferences.

⑴Attribute part:

Global variable: g_

Constant: c_

Class member variable: m_

⑵Type part:

Pointer: p

Handle: h

Boolean type: b

Floating point type: f

Unsigned: u

⑶Description part:

Initialization: Init

Temporary variable: Tmp

Destination object: Dst

Source object: Src

Window: Wnd

We will introduce the Hungarian nomenclature, and we will try our best to adhere to it and the above coding style in the following examples. Again, not all readers are required to abide by it, but I hope that readers as modern software developers will abide by it.

a Array Array Array

b BOOL (int) Boolean (integer)

by Unsigned Char (Byte) Unsigned Char (Byte)

c Char Character (byte)

cb Count of bytes Count of bytes

cr Color reference value Color reference value

cx Count of x (Short) The set of x (short integer)

dw DWORD (unsigned long) Double word (unsigned long integer)

f Flags (usually multiple bit values) Flags (usually multiple bit values)

fn Function

g_ global

h Handle Handle

i Integer Integer

l Long Long integer

lp Long pointer Long pointer

m_ Data member of a class Data member of a class

n Short int Short int

p Pointer Pointer

s String

sz Zero terminated String A string ending with 0

tm Text metric Text rules

u Unsigned int Unsigned integer

ul Unsigned long (ULONG) Unsigned long integer

w WORD (unsigned short) Unsigned short integer

x,y x, y coordinates (short) Coordinate value/short integer

v void void

The following is an example:

hwnd: h means handle, wnd means window, together they are "window handle".

m_bFlag: m represents member variables, b represents Boolean, which together means: "A member variable of a certain class, of Boolean type, is a status flag."

C# .net naming convention

A good naming convention is so hard to find, so it’s better to keep one yourself

1 ADO.NET naming convention data type abbreviation of data type standard naming example

Connection con Northwind

Command ‐ ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐

Parameter parm parmProductID

DataAdapter dad dadProducts

DataReader dtr dtrProducts

Database

DataTable dtbl dtblProduct

DataRow drowRow

DataColumn dcol

DataRelation drel drelMasterDetail

DataView dvw dvwFilteredProducts

WinForm Control Naming Convention

Data type Data type abbreviation Standard naming example

Label having ElLinkLabel LLBL LLBLTODAY

Button btn btnSave

TextBox txtName

MainMenu mmnu

CheckBox chk chkStock

RadioButton rbtn rbtnSelected

GroupBox gbxMain gbxMain

PictureBox pic picImage

Panel pnl pnlBody

DataGrid dgrd dgrdView

ListBox lst lstProducts

CheckedListBox clst clstChecked

ComboBox cbo cboMenu

ListView lvw lvwBrowser

TreeView tvw tvwType

TabControl tctl tctlSelected

DateTimePicker dtp dtpStartDate

HscrollBar hsb hsbImage

VscrollBar vsb vsbImage

Timer tmr tmrCount

ImageList ilst ilstImage

ToolBar tlb tlbManage

StatusBar stb stbFootPrint

OpenFileDialog odlg odlgFile

SaveFileDialog sdlg sdlgSave

FoldBrowserDialog fbdlg fgdlgBrowser

FontDialog fdlg fdlgFoot

ColorDialog cdlg cdlgColor

PrintDialog pdlg pdlgPrint

3 WebControl 命名规范

数据类型数据类型简写标准命名举例

AdRotator adrt Example

Button btn btnSubmit

Calendar cal calMettingDates

CheckBox chk chkBlue

CheckBoxList chkl chklFavColors

CompareValidator valc valcValidAge

CustomValidator valx valxDBCheck

DataGrid dgrd dgrdTitles

DataList dlst dlstTitles

DropDownList drop dropCountries

HyperLink lnk lnkDetails

Image img imgAuntBetty

ImageButton ibtn ibtnSubmit

Label lbl lblResults

LinkButton lbtn lbtnSubmit

ListBox lst lstCountries

Panel pnl pnlForm2

PlaceHolder plh plhFormContents

RadioButton rad radFemale

RadioButtonList radl radlGender

RangeValidator valg valgAge

RegularExpression vale valeEmail_Validator

Repeater rpt rptQueryResults

RequiredFieldValidator valr valrFirstName

Table tbl tblCountryCodes

TableCell tblc tblcGermany

TableRow tblr tblrCountry

textBox

ValidationSummary vals valsFormErrors

XML

Naming rules in .NET

Naming of namespaces

The general rules for naming namespaces are as follows:

　CompanyName.TechnologyName

In this way, the namespace we see should look like this:

　Microsoft.Office

　　PowerSoft.PowerBuilder　　　　　　　　　　　

　Note: This is just a principle. Third-party companies may choose other names.

　Avoid using the name of a company or other well-known brand as the prefix of a namespace. This will cause the possibility that two published namespaces will have the same name.

　For example: Name the Office automatic class provided by Microsoft Microsoft.Office

Use Pascal capitalization and separate logical components with commas.

　For example: Microsoft.Office.PowerPoint

If your brand uses non-traditional capitalization, be sure to follow the capitalization style determined by your brand, even if it deviates from the usual namespace capitalization rules.

　For example: NeXT.WebObjects

　　ee.cummings

Naming of classes and class components

　The naming principle of classes is to name classes with nouns or noun phrases, using Pascal capital letters. Reduce the use of abbreviations in class names. Do not use any class prefix (such as C) and do not use underlined characters.

　For example: public class FileStream {}

　　 public class Button {}

　　 public class String {}

Common naming of CSS classes and IDs:

Website head: head/header (head) top (top) navigation: nanv navigation specific distinction: topnav (top navigation), mainnav (main navigation), mininav (mini navigation), textnav (navigation text), subnav (sub Navigation/secondary navigation)

Flags, advertisements and trademarks: logo (flag), brand (trademark), banner (slogan)

Search: sreach(search), sreachbox(search box), sreachbtn(search button), sreachinput(search input box)

Registration and login: login (login), regsiter (registration), userbox (text box for username/pass), password (password)

Layout, columns and boxes: layout (layout), bigdiv (big div), leftdiv (left column), rightdiv (right column), leftfloat (left floating), rightfloat (right floating), mainbox (), subpage (Sub page/secondary page)

Footer/bottom: foot/footer (footer/bottom), copyright (copyright information), sitemap (site map)

Others: content, skin, title, from, pic, news, shop, list, newslist ), downloadlist (download list), piclist (picture list), dropmenv (drop-down menu), cor/corner (rounded corners), homepage (homepage), crumb (current location navigation)

In fact, I often use uppercase and lowercase letters and _ to distinguish the above ID naming. For example, the main navigation is MainNav. If it is necessary to distinguish, it is MainNav_1, MainNav_2, etc. You can also use the rule of "type + variable name" to name it, for example, write a class in red font, you can

.f_red {}(f is the abbreviation of font). In short, the principle is: capitalization, _, and abbreviations greatly enhance the readability of the code.

In addition, I often use the "in" writing method to name the child divd, which is written in + parent div. This can avoid not knowing how to name the subsequent div after naming it in the front. For example, intop, inbox, infrom, inlogin, etc.