Home > Article > Web Front-end > CSS and DIV naming rules for html pages_html/css_WEB-ITnose
CSS and DIV naming rules for html pages_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:29:581077browse
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
Login bar: loginbar
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
Copyright: copyright
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
Login: login
Login bar: loginbar
Register: regsiter
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
Copyright: copyright
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 "
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 yourself1 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
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
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
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.
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.
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.