preface

In the daily development process, the CSS writing methods of team members are diverse, and different members will have different naming methods, resulting in the overall style structure is chaotic. At the same time, due to partial cognitive bias of CSS, the written style code is not robust and difficult to maintain. Therefore, this article provides a basic guide and specification that students on the team can easily refer to before writing CSS code.

This paper is mainly divided into two parts, the first part is the basic naming norms, the second part is some basic knowledge that can easily lead to cognitive bias.

BEM naming convention

Class names should follow the BEM specification, usually following the following template.

.type-block__element--modifier
Copy the code

type

This property specifies the type of a class name. We agree as follows:

  1. .c-block__element--modifierOn behalf of acomponent
  2. .o-block__element--modifierOn behalf of aIndivisible component
  3. .dt-antd-block__element--modifierOn behalf ofCustom ANTD element styles
  4. js-block__elementIt means that this is aThe name of the class on which the script depends.

Block, Element, Modifier

So let’s do an example here.

<ul class='c-list'>
  <li class='c-list__li'>1</li>
  <li class='c-list__li c-list__li--highlight'>2</li>
  <li class='c-list__li'>3</li>
  <li class='c-list__li'>4</li>
  <li class='c-list__li'>5</li>
</ul>
Copy the code

The entire list is a block, and each li element is actually an element, so we use c-list for list, c-list__li for each li element, and at the same time, C-list__li –highlight is used to indicate elements that need to be highlighted.

Common errors and basics of CSS

height

To set the height percentage attribute, the parent element must have a height attribute (max-height also does not work) or an absolute position element for height verifiable.

padding

  1. Padding-top and padding-bottom only apply to block-level elements.

  2. The padding percentage property is the width relative to the parent element.

  3. Please do not use padding-top:?? px; To achieve vertical center.

    Seven methods of vertically centering CSS

float

The float property was originally intended to surround images and text, but used for layout has several side effects:

  1. Element text is not aligned to the baseline.
  2. The height of the floating element is not counted in the parent element height calculation.

z-index

This property controls the display hierarchy of elements, with the larger the display, the higher the display. But it’s not that simple.

There is the following code

b
margin
b
a
a
b
a
Z - index: 999
b
a

Let’s add another property to A. Position: relative;

a
b
z-index
Located element
Positioning properties

Let’s change the code again.

Positioning properties
z-index
transform
a
b
No location property
There is noz-index
a
b

For those who are not aware, take a look at the little-known pits in this article CSS Stacking Context

font-size

Myth: Font content height does not equal font size

The font size
Line height
20px

line-height

Let’s look at an example to illustrate this property

  1. We set uptextLine is high50pxBut hisThe content areaActually only28px. And, you can tell by the background color of the parent element, when you calculateRegional heightActually achieved50px.
  2. Why is it vertically centered?

It can be explained by a picture.

The content area
28px
Line height
50px
22px
Evenly distributed over
On both sides of the up and down
The content area is centered
Inline box
28px

See the text height and line height Settings for more details