CSS Coding Tips

[1] Minimize code duplication

  • line-heightWrite a multiple
  • font-sizeWrite a percentage

When values depend on each other, the relationship should be expressed in code.

For example, line-height write multiple and font size write percentage are more convenient for maintenance.

font-size:20px;
height:20px;
line-heigth:20px;
Copy the code

Switch to

font-size: 150%; height:20px; The line - heigth: 1.5;Copy the code

[2] Code easy to maintain vs. Less code

For example: We don’t need a left border

border-width: 1px 1px 1px 0;
border-color: #fff;
border-style: solid;
Copy the code

But next time, if you want to change 1px to 2px, you need to change it three times. You can directly optimize it into:

border-width: 1px;
border-left-width: 0;
border-color: #fff;
border-style: solid;
Copy the code

【 3 】 currentColor

p{ color: red; border: solid 1px currentColor; // Or simply border: solid 1px; }Copy the code

The border of the P tag gets the color of the color directly.

[4] Use abbreviations wisely

background: red;
background-color: red;
Copy the code

The difference between the two will result in a different effect if an attribute like background-image is added in the latter.

Document Analysis Notes

Directory comments

/ * - * \ introduced CSS directory \ * - * / / * * * the CSS/base in CSS -- -- -- -- -- -- -- -- -- -- -- -- -- -- introducing cssReset * the font-family - config. CSS - introduce configuration CSS font * Public. CSS -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the introduction of global common CSS * / import '. / assets/CSS/base. CSS '; import './config/font-family-config.css'; import './assets/css/public.css';Copy the code

Comments for specific CSS files

/ * -- -- -- -- -- - * \ $main frame \ * -- -- -- -- -- - * /. Page {} / * -- -- -- -- -- - * \ $title menu \ * -- -- -- -- -- - * /. The title {} / * -- -- -- -- -- -- -- -- -- -- -- -- * \ $scroll bar style reset \ * -- -- -- -- -- -- -- -- -- -- -- - * / ::-webkit-scrollbar{}Copy the code

After leaving the last five lines in the middle, it looks like a paragraph when viewed.

CSS writing sequence

  1. Reset;
  2. DOM elements, such as ul and Li;
  3. Objects and abstract content;
  4. Child elements
  5. Repair the abnormal

CSS

Naming conventions

The underscore (__) represents child elements; The hyphen (-) represents different states;

.ul{}
.ul_li{}
.ul_li-display{}
Copy the code

BEM nomenclature

Class =”button button–state-danger” class=”button button–state-danger”

Prioritization and optimization

priority

! Important The clearer the inline Id Class tag, the higher the priorityCopy the code

To optimize the

Try not to use it! Important, will use more next time! Important to override it.

CSS Style Inheritance

  • Text related:font-family,color,font-size,font-styleAnd so on.
  • List related:list-style,list-style-type,list-style-positionAnd so on.
  • Table related:border-spacing.

Such asborderIt can’t be inherited because it’s not universal, so some have to be added, some have to be added and some have to be deleted.