Shulou(Shulou.com)06/03 Report--

CSS semantic naming methods and commonly used naming rules, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Semantic naming of CSS

From the above picture, we can roughly see that there are two ways of naming CSS: 1, structured naming; 2, semantic naming.

Structured naming: named according to the position of the section in the page, such as the content-left in the image above. If we want to put the sidebar sidebar on the left, then the content-left section is on the right, and the location of the plate is completely different from its naming. Then we have to modify the name of the selector in the page and in the CSS style, which will be very inconvenient, especially when the page structure is complex, left and right. This will be very difficult to maintain.

Semantic naming: named according to the function of the module in the page, such as page header header, navigation bar nav, main main, sidebar sidebar, bottom footer, news list newsList, etc., so that the whole page looks clear and easy to maintain.

So specifically, how should it be named, hump naming? Underscore nomenclature? The nomenclature of Zhonghua line? First of all, what we need to do is to know the meaning of the name. It is best to use English words or general abbreviations. As to whether to use hump naming or underlined naming, the author suggests that both should be used. Hump naming is used to distinguish different words, and underlining is used to indicate affiliation, such as the main navigation bar. We can name it this way, mainNav represents the navigation, and mainNav-current indicates that the navigation is in focus.

The html code is as follows:

Home page

HTML5

CSS3

Javascript

...

In addition, naming requires knowing the meaning of the name, and we should also pay attention to avoid naming conflicts, especially when a project is completed by multiple individuals, we can solve this problem by adding team members' codes or abbreviations before naming. Specific should also be implemented according to the norms of different teams.

Commonly used CSS naming rules

[1. File naming]

Main: main.css

Module: module.css

Basic common: base.css

Layout, layout: layout.css

Topic: themes.css

Column: columns.css

Text: font.css

Form: forms.css

Patch: mend.css

Printing: print.css

[2. How to write notes]

/ * Footer*/

Content area

/ * EndFooter*/

[3. Naming of id]

(1) Page structure

Container: container

Header: header

Content: content/container

Page body: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page periphery controls the overall layout width: wrapper

(2) Navigation

Navigation: nav

Main navigation: mainNav

Subnavigation: subNav

Top navigation: topNav

Edge navigation: sideNav

Menu: menu

Submenu: subMenu

Title: title

Summary: summary

(3) function

Logo: logo

Advertisement: banner

Login: login

Login bar: loginBar

Registration: regsiter

Search: search

Ribbon: shop

Title: title

Join: joinUs

Status: status

Button: btn

Scroll: scroll

Tag page: tab

List of articles: list

Tip: msg

Current: current

Tip: tips

Icon: icon

Note: note

Guide: guild

Service: service

Hot spot: hot

News: news

Download: download

Voting: vote

Partner: partner

Link: friendLink

Copyright: copyright

[4. Naming of class]

(1) Color: use the name of the color or hexadecimal code, such as

.red {color:red;}

.f60 {color:#f60;}

.ff8600 {color:#ff8600;}

(2) Font size, use "font+ font size" as the name directly, such as

.font12px {font-size:12px;}

.font9pt {font-size:9pt;}

(3) align the style, using the English name or word abbreviation of the alignment target, such as

.fl {float:left;}

.mt20 {margin-top:20px;}

(4) title block style, named in the form of "category + function / classification", such as

.titleBar-news {} / * News title bar * /

.titleBar-product {} / * Product title bar * /

After reading the above, have you mastered the method of semantic naming of CSS and the methods of common naming rules? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.