Shulou(Shulou.com)06/01 Report--

Editor to share with you the CSS writing specification, sequence example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

CSS writing order

1. Location attributes (position, top, right, z-index, display, float, etc.)

two。 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.)

The CSS writing specification uses the CSS abbreviation attribute

Some properties of CSS can be abbreviated, such as padding,margin,font, etc., so as to simplify the code while improving the user's reading experience.

Remove the "0" before the decimal point

Abbreviated naming

Many users like to abbreviate class names, but only if people understand your name.

Hexadecimal color code abbreviation

Some color codes can be abbreviated, so let's try to abbreviate it to improve the user experience.

Naming convention for hyphen CSS selectors

1. A long name or phrase can be named using a middle line for the selector.

two。 It is not recommended to use "_" underscores to name CSS selectors. Why?

Press one less shift key when typing

Browser compatibility issues (such as selector naming using _ tips, which is not valid in IE6)

Good distinction between JavaScript variable naming (JS variable naming is "_")

Do not use id casually

Id is unique in JS and cannot be used multiple times, while using class class selectors can be reused, and id takes precedence over class, so id should be used on demand and should not be abused.

Add a status prefix to the selector

Sometimes you can add a state prefix to the selector to make the semantics clearer, such as the ".is -" prefix added in the following figure.

CSS naming conventions (rules) commonly used CSS naming conventions

Head: header

Content: content/container

Tail: footer

Navigation: nav

Sidebar: sidebar

Column: column

The overall width of the page periphery control: wrapper

Left and right center: left right center

Login bar: loginbar

Logo: logo

Advertisement: banner

Page body: main

Hot spot: hot

News: news

Download: download

Subnavigation: subnav

Menu: menu

Submenu: submenu

Search: search

Link: friendlink

Footer: footer

Copyright: copyright

Scroll: scroll

Content: content

Tag: tags

List of articles: list

Tip: msg

Tip: tips

Column title: title

Join: joinus

Guide: guide

Service: service

Registration: regsiter

Status: status

Voting: vote

Partner: partner

How to write the notes:

/ * Header * /

Content area

/ * End Header * /

Naming of id:

1) Page structure

Container: container

Header: header

Content: content/container

Page body: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

The overall width of the page periphery control: wrapper

Left and right center: left right center

(2) Navigation

Navigation: nav

Main navigation: mainnav

Subnavigation: subnav

Top navigation: topnav

Edge navigation: sidebar

Left navigation: leftsidebar

Navigation on the right: rightsidebar

Menu: menu

Submenu: submenu

Title: title

Summary: summary

(3) function

Logo: logo

Advertisement: banner

Login: login

Login bar: loginbar

Registration: register

Search: search

Ribbon: shop

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Banner page: tab

List of articles: list

Tip: msg

Current: current

Tip: tips

Icon: icon

Note: note

Guide: guild

Service: service

Hot spot: hot

News: news

Download: download

Voting: vote

Partner: partner

Link: link

Copyright: copyright

Note:

1. All lowercase

two。 Try to use English

3. No center line or underscore.

4. Try not to abbreviate, except for words that are easy to understand.

CSS stylesheet file naming

Major master.css

Module module.css

Basic shared base.css

Layout, layout layout.css

Topic themes.css

Column columns.css

Literal font.css

Form forms.css

Patch mend.css

Print print.css

The above is all the contents of the article "sample Analysis of CSS Writing Specification and sequence". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.