No rules no radius, sort out some CSS development specifications

This is the first day of my participation in the August More Text challenge

Written order

A set of related attributes

The related attribute declarations should be grouped together in the following order:

Positioning

Box model

Typographic

Visual

instructions

(1) Positioning is ranked first because it can remove elements from the normal document flow and also overwrite the box Model-related styles.

(2) The box model comes second because it determines the size and location of the components.

(3) The other attributes only affect the inside of the component, or do not affect the first two sets of attributes, so they come next.

The abbreviation property

Some CSS properties can be abbreviated, such as padding,margin,font, etc., to simplify code and improve the user’s reading experience.

Remove the “0” in front of the decimal point

Abbreviated name

Many users like to abbreviate the class name, but the premise is to let people understand your name to abbreviate oh!

Hexadecimal color code abbreviation

Some color codes can be abbreviated, we try to abbreviate it, improve user experience.

Hyphenated CSS selector naming convention

1. Long names or phrases can be named using a dash.

2. It is not recommended to name CSS selectors with the underscore “_”. Why?

Press shift one less while typing;

Browser compatibility issues (such as using selector names for _tips, which are not valid in IE6)

Good at distinguishing JavaScript variable names (JS variable names are “_”)

Don’t play around with ids

Id is unique in JS and cannot be used more than once, whereas using the class selector can be used more than once. In addition, id takes precedence over class, so id should be used as needed, not abused.

Adds a status prefix to the selector

Sometimes you can add a state prefix to the selector to make the semantics clearer, as shown in the image below.

Do not use @import

The @import directive is much slower than tags, not only adding extra requests, but also causing unexpected problems.

Alternative methods

(1) Use multiple elements

(2) Compile multiple CSS files into a single file using a CSS preprocessor like Sass or Less

(3) CSS file merging is provided through Rails, Jekyll or other systems

CSS naming conventions (BEM,OOCSS) :

What is BEM? BEM stands for block, element, modifier, and is a front-end naming methodology proposed by the Yandex team. This clever naming makes your CSS classes more transparent and meaningful to other developers.

The naming convention is as follows:

.block{} // blocks are commonly referred to as components or modules in Web application development. Each block is logically and functionally independent of the other..block__element{} // elements are components of a block. The element cannot be used outside the block. BEM does not recommend nesting other elements within an element..block--modifierThe {} // modifier is used to define the appearance and behavior of a block or element. The same block can look different when different modifiers are applied.Copy the code

Advantages:

The advantage of BEM is that the generated CSS class names use only one category selector, which can avoid the complex attribute cascading problem caused by the nesting of multiple category selectors in the traditional practice. In BEM naming, all CSS style rules use a single category selector. Therefore, all style rules have the same specificity and there is no complexity of priority. This simplifies the rules for cascading property values. The beauty of naming conventions in code listings is that each CSS class name is straightforward, and the hierarchy of class names can correspond to the tree structure of DOM nodes.

Disadvantages:

Such class names are too long and complex.

What is OOCSS (Object-oriented CSS) :

OOCSS represents Object Oriented CSS (OBJECT-ORIENTED CSS), which is a practice that applies object-oriented methodology to CSS code organization and management. The key to OOCSS is to improve its flexibility and reusability. This is also the most important aspect of OOCSS. The OOCSS proposition is to make CSS more extensible by adding more classes to the base component to extend the CSS rules of the base component.

Here is a basic library creation style:

.metadata{
  font-size: 1.2 em;
  text-align: left;
  margin: 10px 0;
}
Copy the code

To add more styles to it:

.metadata{
    font-size: 1.2 em;
    margin: 10px 0;
    /* New styles added to the base component */
    width: 500px;
    background-color: #efefef;
    color: #fff;
}
Copy the code

This turns the underlying component metadata you created earlier into a specific component, making it harder to reuse in other scenarios.