A must-read css naming rule for beginners-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

A must-read css naming rule for beginners

高洛峰

Mar 08, 2017 pm 02:09 PM

The editor below will bring you a brief discussion of CSS naming rules (a must-read for novices). The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

Header: header
Content: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left right center: left right center
Login bar: loginbar
Logo: logo
Advertisement: banner
Page body: main
Hotspot ：hot　
News：news
Download：download　
Sub-navigation: subnav　
Menu: menu Footer: footer
Copyright: copyright
Scroll: scroll
Content: content
Tab page: tab
Article list: list
Tips: msg
Tips: tips
Column title: title
Join: joinus
Guide: guild
Service: service
Registration: regsiter
Status: status
Vote: vote
Partners: partner

How to write comments

/* Footer */ Content area/* End Footer */

ID naming

Container: container Header: header Content: content/container Page body: main
Page Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left right center: left right center

ID naming

Page structure

Container: container Header ：header Content: content/container

Page body: main

Footer: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall Layout width: wrapper
Left right center

Navigation

Navigation: nav Main navigation: mainbav Sub navigation: subnav

Top navigation: topnav

Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Sub menu: submenu
Title : title
Summary: summary

Function

Logo: logo Advertisement: banner Login: login Login strip :loginbar
Register: regsiter
Search: search
Ribbon: shop
Title: title
Join: joinus
Status: status
Button: btn
Scroll: scroll
Tab page: tab
Article list: list
Prompt message: msg
Current: current
Tips: tips
Icon: icon
Note: note
Guide: guild
Service: service
Hot spot: hot
News: news
Download: download
Vote: vote
Partner: partner
Friendly link: link
Copyright: copyright

Class naming

(1) Color: Use the color name or hexadecimal code, such as .red { color: red; } .f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) Font size, directly use "font+font size "As a name, such as
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3) Alignment style, use the English name of the alignment target, For example,

.left { float:left; }

.bottom { float:bottom; }

(4) Title bar style, use the "category + function" method to name it, such as

.barnews { }
.barproduct { }

Notes

1. Always lowercase; 2. Use English as much as possible; 3. Do not add dashes and underlines;

4. Try not to abbreviate words unless they are easy to understand at a glance.

Main master.css
Module module.css
Basically shared base.css
Layout, layout.css
themes.css
columns.css
Text font.css
forms.css
patch mend.css
Print print.css

The above is the entire content of the brief discussion on CSS naming rules (a must-read for novices) brought by the editor. I hope everyone will support the PHP Chinese website~

The above is the detailed content of A must-read css naming rule for beginners. For more information, please follow other related articles on the PHP Chinese website!

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

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about