How to write css

It is very important that the css code is clear and clear. This part is the main introduction.

Usually we only reference one css per page, but for larger projects, we need to classify css files.

According to the nature and purpose of css, we can divide css files into "public styles", "special styles", and "skin styles", and reference them in this order. So what are they?

Public style is the most important part. For relatively small projects, we only introduce one css. The style of this css is the public style, which generally includes: "Reset and set default values ​​of labels" ( to eliminate differences between different browsers), "unified calling of background images and clearing floats or other long styles that need to be processed uniformly (so that there is no need to process each separately)", "universal website layout", "universal module" and its extensions", "Components and their extensions", "Functional style", "Skin style".

Special style refers to the independent introduction of such a special style to a column with a high maintenance rate or a page that is significantly different from the entire website to facilitate our maintenance.

The skin style means that the product needs the skin-changing function, so we need to extract the color, background, etc. and put them here for easy management.

We divide css files into public styles, special styles, and skin styles. So how do we classify css files internally? (This part is the focus)

Reset and default css code. This is to eliminate the differences between default styles and browsers, and set the initial style of some tags to reduce duplication of work later. You can set it according to your own website needs, or you can use some initialization code written by others, such as the css initialization code provided by Yahoo engineers. This part of the code is placed at the top of the css.

Uniformly processed css code. Here you can uniformly call the background image and clear the float (referring to the clear content in the more versatile layout, module, and original document). In fact, the CSS initialization code provided by Yahoo engineers includes the CSS code for clearing the float. This part of the code is placed below the reset and default css code.

Layout (grid): We divide the page into several large blocks, usually including header, body, main column, side column, tail, etc. Commonly used!

Module: a larger semantic whole that can be reused. Such as navigation, login, registration, list, comment, search, etc. Commonly used!

Component (unit): It is usually a relatively small individual that cannot be subdivided and is reused in various modules, such as buttons, input boxes, loading, charts, etc. Commonly used!

Function: In order to facilitate the use of some commonly used styles, we separate these highly used styles and use them as needed. Usually these selectors have fixed style performance, such as clearing floats. Not commonly used, not abused!

Skin: Need to be used for skin-changing websites to extract the skin-type style. Non-skin-changing websites cannot be abused and are not commonly used.

Status: Some status class styles. uncommonly used.

css naming rules

Important: Use class selectors, discard ID selectors. Because ID is unique in a page, if you use ID as a selector to write css, it cannot be reused. The advantage of class is reusability, and the degree of privacy is not high. Therefore, I usually choose the ID in HTML for JavaScript, but only use class in CSS, not an ID at all. Doing so actually separates performance and behavior instead of mixing them together.

So how to use the descendant selector? We agree that class selectors that are not prefixed with a single letter "-" and have a length greater than or equal to 2 are descendant selectors. For example: .g-date .u-rightArrow{ float: right;} This is inappropriate, we can write it directly as .u-rightArrow{ float: right;}. And a semantic tag can also be a descendant selector. For example.m-list li{}. The previous sentence means that tags that are not semantic are not suitable as descendant selectors, such as: .m-list div{}. Such writing is likely to cause pollution.

css code format

1. Selectors, attributes and values ​​are all in lowercase.

This point is very critical: according to the xhtml specification, all tag attributes and values ​​must be in lowercase, and we know that xhtml is more standard, so it is best to follow it, so that the selector must be in lowercase It's very necessary. In this case, we cannot use camel case to write class names. For example, class="u-leftArrow" is actually irregular. It is better to write class="u-left_arrow", which can also express the same meaning.

2. Complete a selector definition in a single line.

Advantages: Easy to find and read selectors, easy to insert new selectors and edit, and easy to identify modules, etc. More importantly, excess spaces can be removed to make the code compact and reduce line breaks. Just imagine, if each line has only one attribute name and attribute value, then for a large project, it will be difficult to find and read the selector. If you write a selector in one line, it may be shortened to 1/ 6 to 1/10, this is still very objective.

3. The last value must also end with a semicolon.

In fact, the semicolon can be omitted for the value before the end of the brace, but doing so will cause unnecessary mistakes and trouble in modification, addition, and maintenance work. For example, if you add an attribute at the end, if you have not added a semicolon at the end before, then you have to add a semicolon before the newly added attribute, otherwise an error will occur. For example, in one of my blog posts, I solved the problem of Chinese fonts being displayed as square. This problem occurred when adding JSON data to the box.

The above is the detailed content of How to write css. For more information, please follow other related articles on the PHP Chinese website!