CSS naming rules and css naming rules

CSS naming rules and css naming rules

Reprinted statement:
Original: Bingo
Link: http://blog.bingo929.com/css-coding-semantic-naming.html

I would like to thank the author for sharing this article. This article is completely reproduced from the above link, which is used as a backup for ease of use.

 

CSS naming rules are standardized. When you write css, you often encounter naming problems. Hundreds or even thousands of classes or IDs are on the page, and we are getting more and more troubled. Therefore, it is necessary to organize a set of naming rules. Here I will talk about my own life.

 

When writing css, you often encounter naming issues. Hundreds or even thousands of classes or IDs are on the page, and we are getting more and more troubled.

Therefore, it is necessary to organize a set of naming rules. Here I will talk about my own naming rules.

Class-class

Class Name. I usually use a horizontal line like this.

. Head-logo {... }/* Class Name of the logo on the page header */
. Nav-li {... }/* Name of the list class on the navigation bar */
. Link-panel-h2 {... }/* Title of the link module */

ID

Id. In my understanding, the camper naming is specifically used for unique variables. So I often use this method in javascrpt to define variables.

# NavLastLi {... }/* Get the last list of the navigation bar */
# PanelContent {... }/* Body of the module */
# SidebarFooter {... }/* Module at the bottom of the sidebar */

There are many page modules. we can organize them like this.

Common CSS naming rules

Header: header content: content/container tail: footer navigation: nav sidebar: sidebar

Topic: the overall layout width of the peripheral control of the column page: left right center in wrapper

Logon entry: loginbar flag: logo advertisement: banner page subject: main hotspot: hot

News: news download: download subnavigation: subnav menu: menu

Sub-menu: submenu search: search link: friendlink footer: footer

Copyright: copyright scroll: scroll content: content tab: tab

Article list: list tip: msg tips: tips topic title: title

Join: joinus guide: guild service: service Registration: regsiter

Status: status vote: vote partner: partner

(1) Page Structure

Container: container header: header content: content/container

Page subject: main, footer: footer, navigation: nav

Sidebar: sidebar Bar: the overall layout width of the column page is wrapper.

Left right center

(2) Navigation

Navigation: nav main navigation: mainbav subnavigation: subnav

Top navigation: topnav side navigation: sidebar left navigation: leftsidebar

Right navigation: rightsidebar menu: menu Sub-menu: submenu

Title: title Abstract: summary

(3) Functions

Logo: logo advertisement: banner login: login entry: loginbar

Registration: regsiter search: search functional area: shop

Title: title added: joinus status: status button: btn

Scroll: scroll tab: tab article list: list prompt: msg

Current: current tips: tips icon: icon note: note

Guide: guild service: service hotspot: hot news: news

Download: download vote: vote partner: partner

Link copyright: copyright

 

When we use scripts to perform dynamic page transformation, we recommend that you modify the class name or the id to modify the display style. Of course, the class name class is commonly used.

Modify class name-naming rules (1) color: use the color name or hexadecimal code, as shown in

. Red {color: red ;}

. F60 {color: # f60 ;}

. Ff8600 {color: # ff8600 ;}

(2) font size: Use 'font + font size' as the name, as shown in figure

. Font12px {font-size: 12px ;}

. Font9pt {font-size: 9pt ;}

(3) alignment style. Use the English name of the alignment target, as shown in figure

. Left {float: left ;}

. Bottom {float: bottom ;}

(4) use the 'category + function' method to name the title bar style, as shown in figure

. Barnews {}

. Barproduct {}

Note ::

1. All are in lower case;

2. Try to use English;

3. Do not add hyphens or underscores;

4. Try not to be abbreviated, except words that can be understood without looking at them.

Common css file names

The main master.css module module.css basically shares base.css

Layout.css themes.css column columns.css

Text font.css form forms.css patch mend.css print print.css

 

 

Based on the name of the page partition structure

Naming Conventions for CSS Code have always been a hot topic. By analyzing the necessary elements in a popular three-column layout, we will explain the suggestions and guidance on using semantic methods instead of structured methods to name CSS classes.

Semantic vs. structured CSS class naming

In general, the semantic declaration of CSS class names should consider the "intention" of a relative element in your page ", it is independent of its "positioning" or exact characteristics (structured mode ). Like left-bar, red-text, small-title... These are examples of structured definitions.

Let's take a look at the following example:

 

 

 

 

... Now we want to change the positions of elements on the page. If you are using a structured method(1), You need to re-define all CSS class names because their positions have changed. In Layout(3)We can see that all elements are reversed: right-bar is now "left-bar", and left-content is "right-content ". This type of problem is avoided if you use the semantic method.

 

 

In other words, when using the semantic method, you can only modify the attributes of the CSS classes when modifying the website layout, instead of modifying their class names, if the website code is huge, it will save a lot of time.

 

 

Some Suggestions on semantics:

Before getting started, I would like to recommend two simple guidelines for writing good CSS code:

1. When defining CSS class names, try to use lowercase letters. If there are more than two words, use the "-" character or the first letter of a word in upper case (except for the first word) between each word ). For example, "main-content" or "mainContent ".
 

2. Optimize the CSS code. Only create key and major CSS classes and use HTML-compliant labels (h1, h2, p, ul, li, blockquote,…) as the child elements ,...), For example, do not use this method:

 

Write as follows:

 

 

Example of semantic mode in three-column layout

Let's use this simple example to explain how to use semantic naming for the classic three-bar layout:

 

You can use the semantic method to name CSS as follows: