1. Pay attention to margin folding

When margins overlap, only the larger of the two margins is retained.

Block formatting context BFC

  • Using BFC to avoid margin overlap (height collapse problem, to be added)

Flex layout, Grid layout

Ruan Yifeng teacher’s article

Flex one-dimensional layout tutorial

Grid 2d grid layout tutorial

3. Reset the CSS style

Such as the normalize. CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
Copy the code

4. Set the border-box for all elements

Setting all elements to a border-box makes it easier to resize elements without worrying about padding or border values that will stretch the elements or render them in a new line.

box-sizing: border-box;
Copy the code

Limit the total width to a given value, including inside margins and borders;

5. Show images as background images

It’s easier to keep or change the image’s original size and aspect ratio.

The downside is that the Web accessibility of the page is slightly affected because screen readers and search engines don’t get the image correctly. This problem can be solved by using the CSS Object-fit attribute.

background-size: cover;
background-position: center center;
Copy the code

6. Table borders

Fit the frame without seam.

border-collapse: collapse
Copy the code

7. CSS comment

/*--------------- #Header ---------------*/
header{}header nav{}/*--------------- #content ---------------*/
.content{}/ * * / correctly
p {
    padding: 15px;
    /*border: 1px solid #222; * /
}
Copy the code

8. Dash names

When multiple words are included, use hyphens (-). The CSS is case-insensitive and underscores are not recommended.

9. Don’t repeat Settings

Simply add the generic styles you want to set to the < HTML > or elements and let them automatically inherit down.

Not all attributes are inheritable, and we still need to set them individually on each element.

body {
  font-size: 14px;
  line-height: 1.5;/* Render line height 1.5 times the render font size */
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}
Copy the code

10. Use the transform property

It is best to use transform to create dynamic effects such as displacement or scaling of elements.

11. Keep selector weights low

ID (# ID) > Class (.class) > Type (e.g. Header)

The weights also add up, so a#button.active has more weight than a#button.

Starting with a high-weight selector will cause you to continue to use a higher-weight selector later in the maintenance, and eventually choose to use it! Important, this is not recommended.

12. Don’t use it! important

While this is a quick fix, it can end up with a lot of rewriting. Instead, take the time to find out why the CSS selector isn’t working and change it.

13. Em, REM and PX

The first two are used when building responsive pages, and the EM unit is computed relative to the parent element at each level.

Use REM for global sizing; Use EM for local resizing.

14. CSS writing sequence

The correct style order is not only easy to view, but also a way of optimizing CSS styles.

  1. Position properties (position, display, float, left, top, right, bottom, overflow, clear, Z-index, etc.)
  2. Attributes (width, height, padding, margin, border, background, etc.)
  3. Text series (font, line-height, letter-spacing, color, etc.)
  4. Text-align, vertical-align, text-wrap, text-transform, text-indent, text-decoration, letter-spacing, word-spacing, White-space, text-overflow, etc.)
  5. Css3 attributes (box-shadow, border-radius, animation, transition, etc.)

Objective: To reduce browser reflow and improve browser dom rendering performance.

Repaint: Changing an element’s background color, text color, border color, etc., without affecting its surrounding or interior layout, a portion of the screen is repainted, but the element’s geometry remains the same. It also affects browser rendering performance.

The CSS syntax interpreter process

Principle: Browser rendering process:

① Parsing HTML to build a DOM tree, parsing CSS to build a CSS tree: parsing HTML into a tree of data structure, parsing CSS into a tree of data structure ② To build the render tree: DOM tree and CSS tree merged to form the render tree. With the Render tree, the browser already knows what nodes are in those pages, the CSS definitions of each node and their dependencies, thus calculating the position of each node in the screen. ④ Render tree: according to the calculated rules, through the graphics card to draw the content on the screen.Copy the code

CSS style parsing to display on the browser screen occurs in steps ②③④, visible browser is not a CSS style immediately began parsing but according to the CSS style writing order according to the DOM tree structure render style distribution, complete step ②, and then start traversing each tree node CSS style parsing, The CSS styles are traversed in exactly the same order as they were written before. During parsing, if the browser finds that a change in the positioning of an element affects the layout, it needs to go back and re-render.

div{
  width: 100px;
  height: 100px;
  background-color: red ;
  position: absolute;
}
Copy the code

Suddenly found that when the browser parses to position the element is absolutely positioned elements need from the document flow, and is carried out in accordance with the common element analytic before, so have to render, cancel the position of the element in the document, however, because of the element placeholder changes, other elements may also be affected by it return to position. As a result, step (3) takes too long, which affects the display of step (4) and affects user experience.

Note:

The structure of the A. ender tree is not the same as the structure of the DOM tree. Some nodes with display: None are not placed in the render tree, but in the DOM tree. B. In some cases, such as changing the style of an element, the browser does not reflow or repaint immediately. Instead, it stores these operations and does a reflow, also known as asynchronous reflow. But in some cases, such as changing the window, changing the default font on the page, and so on, the browser will reflow immediately. C. For better user experience, the rendering engine will render the content to the screen as early as possible, rather than wait until all the HTML has been parsed before building and laying out the Render tree. It parses part of the content and displays part of the content, while probably downloading the rest of the content over the network.Copy the code

15. Page structure name

  • Container: the container
  • Header: header
  • Content: the content/container
  • Page body: main
  • Footer: the footer
  • Navigation: nav
  • Sidebar: the sidebar
  • Column: the column
  • The periphery of the page controls the overall layout width: Wrapper
  • Left right center: left right center

16. Naming conventions for CSS code

  • You must name the selector with a letter to ensure compatibility across all browsers.
  • Single-letter class selectors are not allowed.
  • It is not allowed to name English words with ads, such as AD,adv,adver,advertising, to prevent this module from being filtered by the browser as spam. This is true of any file name.
  • The underscore ‘_’ does not appear in class names. It is all lowercase and uses the hyphen ‘-‘.
  • Forbid classnames for humps
  • See of knowledge meaning

17. CSS code precautions

  • Do not use labels that have no semantics at all as selectors, as this can cause widespread contamination
  • Short for CSS color property value
  • Delete the CSS unit whose property value is 0
  • Remove useless CSS styles
  • Opens a new line for a single CSS selector or new declaration
  • To avoid excessive abbreviations,.ico is sufficient to indicate that it is an icon, while. I does not mean anything
  • Use meaningful names, and use names that are structured or target specific, not abstract

18. Use :not() to solve the problem of lists borders

In Web design, we usually use the: last-Child nth-Child selector to override the style originally stated to be on the parent selector.

.nav li {
  border-bottom: 1px solid # 666;
}

.nav li:last-child {
  border: none;
}
Copy the code

Better: Not pseudo-classes

.nav li:not(:last-child) {
  border-bottom: 1px solid # 666;
}
Copy the code

19. Set the font size on form elements for a better mobile experience

To avoid mobile browsers (iOS Safari, etc.) zooming in on HTML form elements when clicking on the < Select > drop-down list, add a font-size style:

input[type="text"].input[type="number"],
select,
textarea{
  font-size: 16px;
}
Copy the code

20 OWL selector

Universal selector * and adjacent Sibling selector +

* + * {
  margin-top: 1.5 rem;
}
Copy the code

other

  • Use preprocessors for large projects

    Provides nesting of variables, CSS functions, and selectors

  • Convert letters to uppercase using text-transform

    text-transform: uppercase;

  • Use open source libraries and other solutions

  • Use AutoPrefixer for better compatibility, online tool: AutoPrefixer

  • Compressing CSS Files

    To improve site and application load speed and page load

  • Be mindful of compatibility and use caniuse

  • Verify CSS, online tools: W3 Validator, CSS Lint, code base: stylelint