CSS: Naming conventions experience sharing

A good naming habit (which is not just a CSS name, of course). It can not only improve the development efficiency, but also benefit the later revision and maintenance.

Assuming that we are currently using a naming method that is idiomatic, and everyone writes like this, then you go to a new team , or someone else takes over your work , you can greatly shorten the time to read someone else's code .

A standardized naming, needless to say, you can appreciate the benefits if you think about it.

CSS: Naming conventions experience sharing
Plate (Plate)	Naming (naming)	Description (Description)
Main container	Wrapper	The largest external container on the page , if no special needs, not recommended
Page Header	Header	The section above the main content, that is, the page head position, can include logo navigation, etc.
Bottom of page	Footer	The following part of the main content, that is, the bottom of the page, can include copyright records, etc.
Bread crumbs	Position	breadcrumb navigation in the page, such as the current location
Page body	Main	The area of the page where the most important content is rendered
website logo	Logo	Mark a picture or text of a website
First Level navigation	Nav	First Level navigation
Second-level navigation	Subnav	Second-level navigation
First level Menu	Menu	First level Menu
Second Level menu	Submenu	Second Level menu
Page Banner	Banner	Some big strips of pictures on the page
Main body	Content	The area where the main content is rendered in the body of the page
Text Side bar	Sidebar	The area of the page body that renders the secondary content
Advertising	Ad
Title	Tit	The title section on the page, such as the headline title can be written as: Tit-topline, the related content of the title section after the connector overview
Summary	Summary	Summary or description of the article
General News List	News-list	News Headlines List
News Top Ranking	Top-list	An ordered list of news
Picture List	Pic-list	Picture List
Picture and text mixed row	Pic-txt
Picture and text mixed image area	Pic-area
Mixed text Area	Txt-area
Tips Tips	Tips	Some tips or hints
Search	Search	Search area
External patches	Mtop/mright/mbot/mleft	such as 1 pixels outside the patch can be written as mtop1,2 pixels mtop2 ...
Internal Patches	Ptop/pright/pbot/pleft	such as 1 pixels in the patch can be written as ptop1,2 pixels ptop2 ...
Normal text for 12px	F12	such as 14px can be written as F14 ...
12px Bold text	Fb12	such as 14px can be written as fb14 ...