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

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)