A summary of commonly used CSS naming conventions, very practical (collection)

CSS naming is named by lowercase English words or combinations, and words are connected by "-". Commonly used CSS naming specifications include text naming specifications, page structure naming specifications, navigation naming, and function naming.

CSS naming generally uses lowercase English words or combinations of names. Words are separated by "-", and English words are not abbreviated unless they are simple words that can be understood at a glance. Next, I will share some commonly used naming conventions in CSS in the article. I hope it will be helpful to everyone

[Recommended course: CSS tutorial】

Text naming convention

index.css: Generally used to create styles on the home page

head.css: Head style, used when multiple page headers have the same design style.

base.css: Shared styles.

style.css: Style file used by independent pages.

global.css: The basis of page style, global public style, which must be included in the page.

layout.css: layout, layout style, used when there are many common types, generally used in homepage pages and product pages

module.css: module, used for product pages, Can also be used with other styles.

master.css: Main style sheet

columns.css: Column style

themes.css: Main style

forms.css: Form style

mend.css: Patch, privatized patch based on the above style.

Page structure naming:

page: represents the entire page, used for the outermost layer.

wrap: coat, a peripheral package that wraps all elements together, used for the outermost layer

wrapper: page peripheral control overall layout width, used for the outermost layer

container: an overall container, used for the outermost

head, header: header area, used for the header

nav: navigation bar

content: content , the most important content area in the website, used for the middle body of the web page

main: the main area in the website (indicating the most important position), used for the middle main content

column: column

sidebar: sidebar

foot, footer: footer, footer. Some additional information placement areas on the website, (or named copyright) are used at the bottom

Navigation naming:

nav, navbar, navigation, nav-wrapper: navigation bar or Navigation package, representing horizontal navigation

topnav: top navigation

mainbav: main navigation

subnav: sub-navigation

sidebar: side navigation

leftsidebar or sidebar_a: left navigation

rightsidebar or sidebar_b: right navigation

title: title

summary: summary

menu: menu, area contains General links and menus

submenu: submenu

drop: drop-down

dorpmenu: drop-down menu

links: link menu

Function naming:

logo: mark the website logo

banner: slogan, advertising banner, top advertising banner

login: login, (such as login Form: form-login)

loginbar: login bar

register: registration

tool, toolbar: toolbar

search: search

searchbar: Search bar

searchlnput: Search input box

shop: Ribbon, indicating the current

icon: small icon

label: trademark

homepage：Homepage

subpage：Second-level page subpage

hot：Hot hot spots

list：Article list, (for example: news list: list -news)

scroll: scroll

tab: tag

sitemap: site map

msg or message: prompt message

current : Current

joinus: Join

status: Status

btn: Button, (for example: the search button can be written as: btn-search)

tips : Tips

note: Note

guild: Guide

arr, arrow: Mark arrow

service: Service

breadcrumb: (That is, the navigation prompt of the page location)

download：Download

vote：Vote

siteinfo：Website information

partner：Partner

link, friendlink：Friendly link

copyright：Copyright information

siteinfoCredits：Credit

siteinfoLegal：Legal information