Front-end specification and thinking (2) --- css specification

This article belongs to the original article, please indicate when reprinting -- from Taoyuan Xiaopan's blog

foreword

Since the team uses the vue framework, some specifications are made under the vue rules.

For the naming rules, refer to the previous article Front-end Specifications and Thinking (1) --- Naming Specification .

Standard specification

1. The style tag in the component uses the scoped attribute. If there is a globally effective style, add a style tag without the scoped attribute

<style>

</style>
<style scoped>

</style>

2. Selector naming uses serial nomenclature

// bad
.activityTitle {
}

.activity_title {
}

// good
.activity-title {
}

Why not go the sophisticated BEM way?

Because now we have a better way: css modularization. Vue's scoped is one of the implementations. We no longer need the module prefix in BEM to isolate different modules.

3. Disable selector nesting

Special case: when overriding styles from third-party libraries.

If the selectors are nested, then when the html structure changes, the css style also changes, increasing the maintenance cost.

// bad
<div class="activity">
   <div class="item"></div>
</div>

.activity .item {
}

// good
<div class="activity">
   <div class="activity-item"></div>
</div>

.activity-item {
}

4. The length of the combined word of the class name should not exceed 5 levels

// bad
.activity-box-item-ul-li-a {
}

// good
.activity-item-li-a {
}

5. Prohibit the use of tag selectors

The tag selector will hit multiple tags at the same time, and modifying a single CSS style will affect multiple places.

// bad
<li></li>

li {
}

// good
<li class="activity-item"></li>
.activity-item {
}

6. Prohibit the use of !important

Once the style uses important, it is difficult to be overridden if it needs to be overridden.

7. Prohibit the use of id selectors

The id selector is unique and has too much weight.

8. Prohibit the use of the * selector

Reason: The scope of influence is too large, and the results are difficult to predict.

9. Do not set the z-index too large, 1-9 for general floating layer elements, 10-99 for pop-up windows and the like

Special case: Overriding third-party libraries

10. Block-level elements default width: 100%, no need to declare

There are often small partners who write this style, just to remind.

Recommended Practice

1. Box and container naming

.activity-box {}
.activity-wrapper {}
.activity-container {}

2. Image naming

.activity-img {}

3. List naming

.activity-item {}
.activity-li {}

4. Hyperlink a tag named

.activity-a {}
.activity-link {}

5. Relevant description naming

.activity-desc {}

6. Form element naming

.activity-input {}
.activity-radio {}
.activity-checkbox {}

7. Interactive state naming

Active state class name: .active
Disabled state class name: .disabled

<li class="item active"></li>

.item.active {
  color: red;
}

8. Prefer flex layout

Epilogue

In fact, for a team, any point that may be repeated, often mistaken, and better written. These kinds of things can be distilled into specifications.

For CSS, formulating the team's reset.css is also an essential part.

Any other person's specification is not a silver bullet, we can only explore the most suitable CSS specification for ourselves.

References

• "In-depth analysis of css"
• "css selector world"
• Bump Labs