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

In this article, the editor introduces in detail "what are the web front-end style specifications", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the web front-end style specifications" can help you solve your doubts? let's follow the editor's ideas to learn new knowledge.

Naming convention

1.CSS is generally named in lowercase letters or combinations, with words separated by "-" between words; English words are not abbreviated unless they are easily understood.

two。 The outermost elements in all components have a style named with the component name + wrap, such as:

OrderList components:

3.class must represent the content or function of the corresponding module or component, and must not be named after style information, such as:

4.css selector: use class selector as much as possible, but less element selector (e.g. div)

Page structure naming

Wrap: represents the entire page for the outermost layer

Container: an integral container for the outermost layer

Head,header header area, for headers

Nav: navigation bar

Content: content for the central body of the site

Main: the main area of a website for central content.

Sidebar: sidebar

Footer: footer

Navigation naming

Nav: navigation bar

Topnav: top navigation

Mainnav: main navigation

Title: title

Menu: menu

Submenu: submenu

Drop: drop-down

Dropmenu: drop-down menu

Links: connection menu

Style sequence specification

It is recommended that the relevant attribute descriptions be put in a group to improve the readability of the code.

Layout mode, location, related attributes (position, left, right, top, bottom, z-index)

Box model, related properties include (display, float, width, height, margin, padding, border, border-radius)

Text typesetting, related attributes include (font, color, background, line-height, text-align)

Visual appearance, related properties include (color, background, list-style, transform, animation)

Because the definition removes elements from the normal document flow and also overrides styles related to the box model, it is listed on the front page. The box model determines the size and size of the component, so it ranks second. Text and vision have little influence on the element, so it is placed in the third and fourth place. The sample code is as follows:

.box {

Position: absolute

Top: 0

Left: 20%

Z-index: 99

Width: 100px

Height: 100px

Font-size: 20px

Color: red

Background-color: aqua

}

Decimal point and unit

The value between-1 and 1 removes the 0 of the decimal point, and if the attribute value is the number 0, no units are added.

.box {

Width: 100px

Height: 100px

Margin: 0 10px 20px 0

Opacity:. 5

}

Quotation mark

Property selectors or attribute values are enclosed in double quotation marks, while the URL value url () does not use any quotation marks.

.box {

Font-family: "open sans", arial,sans-serif

Background-image: url (https://cache.yisu.com/upload/information/20220117/488/18093.jpg);

}

Space

Add a space between each declaration quick selector and the left parenthesis

The right curly braces of the declaration should be in a separate line.

Each declaration statement should be followed by a space with no space in front of it

.box {

Float: left

Width: 100px

Color: # 333

Background-color: # f5f5f5

Text-align: center

}

Media inquiry

Put the media query near the relevant rules as far as possible for future reference.

.element {

}

. element-avatar {

}

@ media (min-width: 480px) {

.element {

}

. element-avatar {

}

}

Annotation

Give the right comments to the code in place to make it easier for others to understand. Good code comments convey context and goals

/ *

Name

The meaning of each parameter

, /

. modal-header {

}

Global style naming convention

Global styles are named in hexadecimal, for example:

$color-ffffff: # ffffff

In the case of transparency, it is common to add an extra letter an after the hexadecimal to make a difference.

$color-ffffffa: # ffffff

If there is the same hexadecimal, then add one more function after the hexadecimal

After reading this, the article "what are the web front-end style specifications" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more related articles, you are 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.