search
HomeheadlinesA 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

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

[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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

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

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

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)