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