Using good CSS writing specifications to write CSS code can improve the reading experience of the code. Here Design Daren summarizes a CSS writing specification and CSS writing order for your reference:
CSS writing order
1. Position properties (position, top, right, z-index, display, float, etc.)
2. Size (width, height, padding, margin)
3. Text series (font, line-height, letter-spacing, color- text -align, etc.)
4. Background (background, border, etc.)
5. Others (animation, transition, etc.)
CSS writing specification
Abbreviating properties with CSS
Some properties of CSS can be abbreviated, such as padding, margin, font, etc., so as to simplify the code and improve the user's reading experience.
Remove the "0" before the decimal point
shorthand naming
Many users like to abbreviate class names, but the premise is that people must understand your name before abbreviating it!
Hexadecimal color code abbreviation
Some color codes can be abbreviated.
Hyphenated CSS selector naming convention
1. Long names or phrases can use dashes to name selectors.
2. It is not recommended to use "_" underscore to name CSS selectors, why?
- Press one less shift key when typing;
- Browser compatibility issues (such as using the selector named _tips, which is invalid in IE6)
- Can distinguish JavaScript variable names well (JS variable names are named with "_")
Here is a detailed discussion of dashes and underscores, English: Click to view Chinese Articles: Click to view
Don't use id arbitrarily
The id is unique in JS and cannot be used multiple times, but it can be reused using the class selector. In addition, the priority of the id is the same as that of the class, so the id should be used as needed and not abused.
Add state prefix to selector
Sometimes you can add a prefix representing the state to the selector to make the semantics clearer. For example, the following figure is prefixed with ".is-".
CSS naming conventions (rules)
Common CSS naming conventions
Header: header
Content: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page Peripheral Control Overall Layout Width: wrapper
left and right middle: left right center
Login bar: loginbar
Logo: logo
Advertisement: banner
Page body: main
hotspot :hot
news:newsDownload
:downloadSubnavigation
:subnavmenu :
menuSubmenu : submenuSearch :searchFriend link:friendlinkfooter:footerCopyright : copyrightScroll :scrollContent: contenttags : tagsArticle list:listTips info:msg Tips: tips column title: title join: joinus guide: guide service: service registration: regsiter status: status vote: vote
Partner: partner
Notes writing:
/* Header */
Content area
/* End Header */
id naming:
1) Page structure
Container: container
header: header
content: content/container
page body: main
page footer: footer
navigation: nav
sidebar: sidebar
column: column
page periphery control overall layout width: wrapper
left and right center: left right center
(2) Navigation
nav: nav
main nav: mainnav
sub nav: subnav
top nav: topnav
side nav: sidebar
left nav: leftsidebar
right nav: rightsidebar
menu: menu
sub menu: submenu
title: title
summary: summary
(3) Function
Logo: logoAdvertisement:
bannerLogin :
loginLogin
bar:loginbarRegistration
:registerSearch :searchribbon:
shopTitle :
titleJoin :
joinusStatus : statusButton : btnScroll : scrollTab : tabArticle list
:listTips : msgCurrent : currentTips: tipsIcon : iconComment : noteGuide :guildService:serviceHot: hotNews:newsDownload : downloadVoting : votePartner : partnerLink: linkCopyright : copyright
Precautions::
1. Always lowercase;
2. Use English as much as possible;
3. Do not add middle bars and underscores;
4. Try not to abbreviate, unless you understand the words at a glance.
CSS style sheet file naming
The main master.css
module module.css
basically share base.css
layout, layout layout.css
theme themes.css
column columns.css
text font.css
form forms.css
patch mend.css
print print.css
Reprinted from: http://www.shejidaren.com/css-written-specifications.html