CSS and DIV naming rules for html pages_html/css

CSS Naming Rules

Header: header

Content: content/containe

Tail: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

Left and right center: left right center

Logo: logo

Advertisement: banner

Page body: main

Hotspot: hot

News: news

Download: download

Sub-navigation: subnav

Menu: menu

Sub-menu: submenu

Search: search

Friendly links: friendlink

Footer: footer

Scroll: scroll

Content: content

Tab 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

Name of id in XHTML file

(1) Page structure

Container: container

Page header: header

Content: content/container

Page body: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

Left and right center: 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

Search: search

Ribbon: shop

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Tab: 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 link: link

CSS DIV naming rules:

Login bar: loginBar
Logo: logo
Sidebar: sideBar
Advertisement: banner
Navigation: nav
Sub-navigation: subNav
Menu: menu
Sub-menu: 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
Registration: regsiter
Status: status
Button: btn
Voting: vote
Partner: partner
Copyright: copyRight

1. CSSID naming
Coat: wrap
Main navigation: mainNav
Sub-navigation: subnav
Footer :footer
Whole 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 prompt for the page location)
Container: container
Content: content
Search: search
Login: login
Ribbon: shop (such as shopping cart, checkout)
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

Description: 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 list, the news list is newslist, the picture list is piclist,
the content page is view,
/**/
Overall large frame: #wrapper
Inside the large frame: #inwrapper
///////////////////////////// ///////////////////////////////////////////////////// ////////////////////////////
Top and banner: .top
Top and inside banner: .intop
Logo :.logo
Banner: .banner
Navigation: .menu
In the 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
Inside the main content: .inmainwrapper
Left Sidebar: .sideleft
Inside left column: .insideleft
Right column: .sideright
Inside right column: .insideright
Middle: .sidecenter
Inside center: .insidecenter
///////////////////////////////////////////////////// ///////////////////////////////////////////////////// /////////
Bottom: .foot
Inside bottom: .infoot
//////////////////////// ///////////////////////////////////////////////////// /////////////////////////////////////
/*Other naming*/
Search: .search
In search: .insearch
Search bar: .searchselect
Search button: .serachbuttom
Input text box: .input
.select

/*Table style*/
Overall frame of the table: .listbox
Width of the table: .listbox-table
Text style of the header of the table: .listbox-header
Text style of the body of the table: .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)
/*General picture style*/
General picture style: .img
/*Clear float*/
Clear all floats: .clear
Clear Float on the left: .clearleft
Clear float on the right: .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
Breadcrumb: breadcrumb (i.e. navigation prompt of the page location)
Container: container
Content: Content
Search: Search
Login: Login
Ribbon: shop (such as shopping cart, checkout)
Current current
Header: masthead
Abstract, summary summary or general
Floating picture on the left photoleft
Floating picture on the right photoright
Title title
Entry bottom entrybottom
More extended or .more
Container backgroundcontainerbg
service service
service link servicelink
line line
text text
rightside
copyright
news news
book cover wrapper
intro-part1
column column
pathways
section
module module
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 layout.css
columns.css
text font.css
print style print.css
theme themes.css

4. Annotation
example in style sheet一
/* 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

Includes wrapper and container
Header or abbreviated as hd
Footer or abbreviated as ft
Navigation nav
Your location breadcrumbs
Secondary navigation sub_nav
Sidebar or side-column
Module module

Naming rules in the 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 tries to describe the content of the entity, consisting of words or combinations of words, each The first letter of a word is capitalized, other letters are lowercase, and it does not start with a number or _.

For example: table User_Info view UserList stored procedure UserDelete

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

Tables tbUser_Info, tbMessage_Detail

View vi_MessageList

Stored procedure sp_MessageAdd

Database table naming rules

Fields consist 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 represent a table.

For example: tbMember　tbMember_Info　　tbForum_Board　　tbForum_Thread1

Field naming rules

Numbers, characters, date/time, lob (large object), miscellaneous, fields are represented by the abbreviation of the table and underscore , consisting of 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 in the middle.

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 in the middle.
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 a 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 class and id names and use these names to name divs. and other format page elements for identification. 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 naming conventions for 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 content of the page. 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 naming conventions for 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:

For example: branding

　main-nav

　subnav

main-content

sidebar

These names are as easy to understand as the intuitive naming methods, but they describe the role of the page element rather than its 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. Conventions

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 methods according to their affiliation, which can make the arrangement of files more powerful. Logic.
For example: a picture file is "file_on" before the mouse click. And the picture file after the click is named "file_off" is named according to this category. It is more clear.

4 .Attribute-based naming convention
For example: small decorative pictures are expressed according to "___.*". This is "heart_red_401 *334_1.jpg"

5. Naming convention based on ordinal numbers
In web pages, in order to reduce the download time of images, the images are generally divided into small parts to form an overall image. In this case, a two-dimensional array can be used
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. Naming convention based on enumeration

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

There are also different sizes for viewing pictures on other websites, 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.

◆Naming variables, methods, and properties

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

Variable
.NET Name
Hungarian Name
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 law does not recommend using 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 good programming to name your library (called assembly in .NET) according to the naming rules Habit. 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 name it DataSet return_data(), change it to DataSet ReturnData().

You should also follow a unified 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 a nested block structure.

◆Hungarian nomenclature (efoxxx attached)

Hungarian nomenclature was invented by a Hungarian programmer, and he has worked at Microsoft for many years. This nomenclature is spread through various Microsoft products and documents. Most experienced programmers, no matter which language they use, use it more or less

The basic principle of this naming method 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: b

Float: 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 to follow it and the above coding style in the following examples. Again, I do not require all readers to abide by it, but I hope that readers as modern software developers will abide by it.

a Array Array

b BOOL (int) Boolean (integer)

by Unsigned Char (Byte) Unsigned Char (Byte)

c Char ; Color (reference) value

cx Count of x (Short) Set of x (Short integer)

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

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

fn Function

g_ global

h Global handle

i In teger Integer

l Long pointer Long pointer

m_ Data member of a class Data member of a class

n Short int Short integer

p Pointer Pointer

s String String

sz Zero terminated String String that ends with 0

tm Text metric Text rule

u Unsigned int Unsigned integer

ul Unsigned long (ULONG) Unsigned long integer

w WORD (unsigned short) Unsigned short integer

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

v void Empty

The following is an example:

hwnd: h represents the handle, wnd represents the window, and 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, it’s better to collect one yourself

1 ADO.NET naming convention Data type Abbreviation of data type Standard naming example
Connection con Northwind
Command cmd cmdReturnProducts
Parameter parm
DataAdapter dadProducts
DataReader dtrProducts Dataset DSTNONORTHWIND
Datatable DTBLPRODUCT
DataRow DrowRow98
DataColumn DcolProptid
DataRelation DrelmasterDetail
DataView dvw dvwfilteredProducts

Winform Control naming specifications

Data type Abbreviation of data type Standard naming example lbl lblMessage
LinkLabel llbl llblToday                                                                                                                                                         mmnuFile
CheckBox chk chkStock
RadioButton rbtn rbtnSelected
GroupBox gbx gbxMain
PictureBox pic picImage
Panel pnlBody
DataGrid dgrdView dgrdView
ListBox lst lstPro ducts                                                                                         LVWBROWSER
TreeView TVW TVWTYPE
TabControl TCTLSELECTD
DateTimepicker DTPSTATDATDAT
HSCROLLL HSBIMAGE
sb vsbimage
Timer TMR TMRCOUNT
Imagelist 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 命名规范

Data type Abbreviation of data type Standard naming example
AdRotator adrt Example
Button btn btnSub mit
Calendar                                                                                                             chklFavColors                                                                                        CompareValidator          valc                                                 CustomValidator valx valxDBCheck
DataGrid dgrd dgrdTitles
DataList dlst dlstTitles                                                                                                                        imgAuntBetty                                                                lbtn lbtnSubmit                                                                                                                                                   plhFormContents
RadioButton rad radFemale
RadioButtonList radl radlGender
RangeValidator valg valgAge
RegularExpression valeEmail_Validator
Repeater rpt        rptQueryResults                    🎜>RequiredFieldValidator valr valrFirstName
Table tbl tblCountryCodes tblcGermany
TableRow tblr tblrCountry
TextBox txt txtFirstName xmlc xmlcTransformResults

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 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ugaider >> Note: This is just a principle. Third-party companies may choose other names.
Avoid using the name of a company or other famous brand as a prefix for a namespace, as this will create the possibility of two published namespaces having the same name.
For example: Name the Office automatic class provided by Microsoft Microsoft.Office

Use Pascal capitalization and separate logical components with commas.

Example: Microsoft.Office.PowerPoint

If your brand uses non-traditional capitalization, be sure to follow the capitalization determined by your brand, even if it deviates from the usual name Space 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. 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 header: 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 (username/pass text box), 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 (subpage/secondary page)

Footer/bottom: foot/footer (footer/bottom), copyright (copyright information), sitemap (site map)
Others: content (content) , skin (skin), title (title), from (form), pic (picture), news (news), shop (shopping area), list (list/list), newslist (news list), downloadlist (download list) , piclist (picture list), dropmenv (drop-down menu), cor/corner (rounded corners), homepage (home page), crumb (current location navigation)
In fact, I often use uppercase and lowercase letters and _ to name the above ids. Differentiation, for example, the main navigation is MainNav, if necessary, it is MainNav_1, MainNav_2, etc. You can also use the "type variable name" rules to name it. For example, to write a class with 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, and write it in the parent div. This can avoid not knowing how to name the following div after naming it in the front. For example, intop, inbox, infrom, inlogin, etc.