A must-read css naming rule for beginners

The editor below will bring you a brief discussion of CSS naming rules (a must-read for novices). The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

Header: header
Content: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left 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 Footer: footer
Copyright: copyright
Scroll: scroll
Content: content
Tab page: tab
Article list: list
Tips: msg
Tips: tips
Column title: title
Join: joinus
Guide: guild
Service: service
Registration: regsiter
Status: status
Vote: vote
Partners: partner



How to write comments

/* Footer */ Content area/* End Footer */

ID naming

Container: container Header: header Content: content/container Page body: main
Page Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left right center: left right center

ID naming

Page structure

Container: container Header ：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



Navigation

Navigation: nav Main navigation: mainbav Sub navigation: subnav

Top navigation: topnav

Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Sub menu: submenu
Title : title
Summary: summary



Function

Logo: logo Advertisement: banner Login: login Login strip :loginbar
Register: regsiter
Search: search
Ribbon: shop
Title: title
Join: joinus
Status: status
Button: btn
Scroll: scroll
Tab page: tab
Article list: list
Prompt message: msg
Current: current
Tips: tips
Icon: icon
Note: note
Guide: guild
Service: service
Hot spot: hot
News: news
Download: download
Vote: vote
Partner: partner
Friendly link: link
Copyright: copyright



Class naming

(1) Color: Use the color name or hexadecimal code, such as .red { color: red; } .f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) Font size, directly use "font+font size "As a name, such as
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3) Alignment style, use the English name of the alignment target, For example,

.left { float:left; }

.bottom { float:bottom; }

(4) Title bar style, use the "category + function" method to name it, such as

.barnews { }
.barproduct { }

Notes

1. Always lowercase; 2. Use English as much as possible; 3. Do not add dashes and underlines;

4. Try not to abbreviate words unless they are easy to understand at a glance.

Main master.css
Module module.css
Basically shared base.css
Layout, layout.css
themes.css
columns.css
Text font.css
forms.css
patch mend.css
Print print.css

The above is the entire content of the brief discussion on CSS naming rules (a must-read for novices) brought by the editor. I hope everyone will support the PHP Chinese website~

The above is the detailed content of A must-read css naming rule for beginners. For more information, please follow other related articles on the PHP Chinese website!