CSS specification of web front end

JavaScript language 2020-11-13 05:03:58
css specification web end

CSS Refers to cascading style sheets (Cascading Style Sheets), Define how to display HTML Elements , But because of CSS Born global , As project complexity increases , It is easy to have style coverage and other problems .

1. General specifications

File encoding

  • In order to avoid the content garbled , Unified use UTF-8 Encoding preservation .

  • The first line of the style file sets the character set to UTF-8

@charset 'UTF-8'; /* Note that the character set description should be on the first line */

Indent specification

Unified use Two spaces indented

2. Initialization specification

The initial style of each browser manufacturer is different , In order to eliminate different browsers from HTML Differences in text presentation , We often introduce some initialization styles , Such as normalize.css、reset.css etc. , When introducing these styles, we need to pay attention to the following situations :

  • Don't use UI frame , Build from scratch
    In the case of building from scratch , To initialize the style , Introduce... At the beginning of the project , Don't introduce... In the middle of development , Avoid unpredictable style conflicts .

  • Don't use UI frame , But some plug-ins are used
    Plug ins often have their own style , Such as rich text plug-ins , Using initialization styles in the middle of development can lead to style confusion , Therefore, extensive initialization is not recommended , just Simply initialize that will do .

* {
padding: 0;
margin: 0;
  • Already used UI frame
    When you know clearly that you need to use UI Frame time , Do not use third-party initialization styles , Whether before or during the project , because UI Frameworks usually come with initialization , The addition will affect the original effect .

3. Code specification

Naming specification

class Should be named after function or content , It's not named in terms of expression
class And id The letters of words are lower case , When multiple words are formed , Use the center line - Separate
Use the only id As Javascript hook, At the same time, avoid creating no style information class
web Front end development resources Q-q-u-n: 767273102 , There are free development tools , Zero basis , Advanced video tutorial , I hope novices don't take detours

Code style.

  • Unified use Expand the format , Compact format is not recommended

    /* Expand the format */
    .test {
    color: red;
    font-size: 12px;
    /* Compact format */
    .test {
    color: red;
    font-size: 12px;
  • Unified Two spaces Indent

  • A semicolon is added at the end of the property declaration

  • A space between the selector and the left bracket , The space after the property colon

    /* recommend */
    .test {
    color: red;
    font-size: 12px;
    /* Not recommended */
    .test {
    color: red;
    font-size: 12px;
  • Don't do it 0 Designated unit

  • Color value and attribute value hexadecimal value can be abbreviated as much as possible

    /* recommend */
    .test {
    color: #fff;
    /* Not recommended */
    .test {
    color: #ffffff;
  • Use quotation marks

    url() 、 Property selector 、 Attribute value usage Single quotation marks .

  • Remove the floating

    When an element needs to be raised to include an internal floating element , By setting the pseudo class clear Or trigger BFC By clearfix. Try not to add empty tags .

    Trigger BFC There are many ways , Common are :

    • float Not none
    • position Not static
    • overflow Not visible

Font specifications

  • Foreign business website , Do not use font-face introduce Microsoft YaHei typeface , Avoid infringement ( Including picture content )
  • Need to be in Windows Chinese content displayed on the platform , Its font size should not be less than 12px
 Use on website Microsoft YaHei There are three forms of typeface :
1、【 tort 】 Use... In the picture Microsoft YaHei typeface , For example, the website header map
2、【 Security 】 Website CSS use font-family Declare that the site uses Microsoft YaHei typeface , For example, the title and body of the article
3、【 tort 】 Website through font-face quote Microsoft YaHei , It's not common

Selector specifications

In strict compliance with BEM(Block Element Modifier) when , Only class selectors are recommended , but BEM Writing trouble , So the suggestions are as follows

  • Disable universal selector *
  • Do not use tag selectors without specific semantic definitions

Attribute order

CSS The attributes are in order CSS Part of a good coding style , Helps improve code readability , Easy to find code problems , It's good for teamwork , But in the project found that some students in the writing attribute order is more casual , Think of an attribute and write a .

It is recommended to write in the following order

  1. Location attribute (position、display、float、left、right)
  2. Dimension properties (width、height、padding、margin、border)
  3. Font properties (color、font、text-align)
  4. Other attributes (background、cursor、outline)

The goal is to browse code , Can gradually clear the effect of the target element .

.test {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-size: 12px;
color: #333;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
web Front end development resources Q-q-u-n: 767273102 , There are free development tools , Zero basis , Advanced video tutorial , I hope novices don't take detours

4. Annotation specifications

Single-line comments

Annotate with /* Start , With */ end , Comments cannot be nested within comments , The comment Leave a space before and after .

/* Recommended single line comments */
/* One line comment not recommended */

notes : stay sass and less Double slash annotations can also be used in preprocessing languages , But after compiling, the comments will not appear in css In file , Therefore, it is recommended to use /* */ notes .

Module annotation

Sometimes we need a module ( A block of code ) Make a functional statement , And can clearly distinguish other codes , We can use module annotations .

Annotate with /* Start , With */ end , Leave a space before and after , Fill in the first line describe , Fill in the last line Split line .

/* Recommended module comments
---------------------------------------------------- */
/* Module comments not recommended ---------------------------------------------------- */

* File information notes

If a functional document is needed , Make it easy for others to quickly understand the purpose of this document , Recommended at the beginning of the file ( Under the character set description ) Write the following comments , The comments include a description of the document 、 founder 、 Creation time, etc .

@charset "UTF-8";
* @desc File function description , Make it easy for others to quickly understand
* @author founder
* @date Creation time

5. Covering specifications

  • As far as possible To use less importent
  • vue Unified use of single file components css/less/sass scoped
  • Every page / The component needs to have a Globally unique The logo of id/class, All the styles under it need to be marked with the unique identification
  • Avoid global modification of existing styles , It has to be specific to the page ( By weight )
  • Disable full matching * Selectors ( Except in special cases , Such as initialization )

vue Single file component modification style does not take effect. You can use /deep/ or >>>

6. Media query

For the internal management system , Business uses more ThinkPad The notebook , The screen resolution is 1366*768. It is recommended to use Resolution Test Browser development for browser window size debugging .

Download address :www.cnplugins.com/devtool/res…

The common sizes are as follows

size describe
≥1366px A big screen Large desktop display
≥1200px Medium screen Desktop display
≥992px Medium screen Desktop display
≥768px A small screen Flat
<768px Super small screen mobile phone

first PC End

By default, the layout is based on the maximum size , As the size shrinks, it gradually becomes the mobile terminal layout

body {
background: gray;
@media screen and (max-width: 1366px) {
body {
background: red;
@media screen and (max-width: 1200px) {
body {
background: yellow;
@media screen and (max-width: 920px) {
body {
background: green;
@media screen and (max-width: 768px) {
body {
background: black;

Priority mobile end

By default, the layout is based on the minimum size , As the size increases, it gradually becomes PC End layout

body {
background: gray;
@media (min-width: 768px) {
body {
background: red;
@media (min-width: 920px) {
body {
background: green;
@media (min-width: 1200px) {
body {
background: yellow;
@media (min-width: 1366px) {
body {
background: red;

If you need to make a print style to fit , Need to use @media print

@media print {
body {
background: #fff;
web Front end development resources Q-q-u-n: 767273102 , There are free development tools , Zero basis , Advanced video tutorial , I hope novices don't take detours

7. Unit specifications

CSS There are two kinds of units , Namely Absolute units and Relative units .

  • Absolute units are often used

    • px: Pixels ( A dot on a computer screen )
    • cm: centimeter
    • in: Inch
    • pt: pounds (1 pt be equal to 1/72 Inch )
  • A common relative unit

    • %: Percentage of parent element
    • vw: Percentage of the width of the viewport
    • vh: Percentage of view height
    • em: Current font multiple
    • rem: Root element font multiple
    • * rpx: Wechat applet dedicated , Set the screen width to 750rpx

The more used units are px、%、rem Three , Suggest PC End use px Company 、 Mobile terminal rem, Need to control the size or use px

remarks : If you need to calculate values in different units , have access to css3 Method calc()_

8. Compatibility Specification

The use of private properties

It is because of the different browser manufacturers , As a result, some styles need to be prefixed to work , The following common browser kernels and prefixes

browser kernel Prefix
Firefox Gecko -moz-
Chrome WebKit -webkit-
IE Trident -ms-
Safari WebKit -webkit-
Opera Presto -o-
Domestic famous browser WebKit -webkit-
Common mobile browsers WebKit -webkit-

CSS3 Browser private prefix before , The standard prefix follows

.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

remarks : stay webpack In the environment , have access to postcss-loader Auto add private prefix _

本文为[JavaScript language]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple