What are the characteristics of a good productivity tool?

  • simple
  • Solve repetitive problems and let’s leave work early

Let’s start by writing a simple VUE component

This is an H5 shared link emulation component <template> <div class="main"
    @click.stop="link"
  >
    <div class="conten-box ellipsis">
      <div class="title ellipsis">
        {{ title }}
      </div>
      <div class="content ellipsis">
        {{ content }}
      </div>
    </div>
    <div class="image-box">
      <el-image
        class="image-content"
        :src="image"
        fit="cover"
      />
    </div>
  </div>
</template>
<script>
export default {
    ...
}
</script>
<style lang="scss" scoped>
.ellipsis{} // 
.main{
    display: flex;
    cursor:pointer;
    .content-box{
        flex:1;
        flex-direction: column;
    }
    .title{
        font-size:16px;
        font-weight: bold;
        color:# 485465;
        line-height: 20px;
        margin-bottom: 8px;
        margin-top:12px;
    }
    .content{
        font-size:14px;
        color:# 485465;
        line-height: 18px;
    }
    .image-box{
        width: 64px;
        height:64px;
        margin-left: 20px;
        border-radius: 2px;
        overflow: hidden;
    }
    .image-content{
        width: 100%;
        height:100%;
    }

}
</style>
Copy the code

Parsing the component

The style of this component consists of two parts:

  • 1. Internal styling of components
  • 2. Common styles (Ellipsis)

We found that although we could introduce common styles to reduce the amount of code we had. But common styles can only be cited for specific requirements, such as ellipsis over length, or for some globally common styles. If it is combined with the needs of the business UI, it cannot be well met.

This is a very common problem and actually a pain point. Because of this pain point, we had to write a lot of CSS code in each component that was coupled to the business UI

If CSS is not coupled to the business, you will spend a fair amount of time writing CSS as a front-end

So is there a way to reduce the amount of code in our business CSS so that we can be more efficient and leave work earlier. Let’s get to see our girlfriends, wives, kids, and moms early.

It’s pain points

For each div we write a corresponding CSS class. This is very time consuming during development and difficult to maintain.

We found that the style and component coupling of the project resulted in a large number of CSS for each component. Most of these CSS are font-size, padding, margin, Flex, color…

Can we integrate all of these common styles in one way so that we can reference all of them from the common class?

Is there a way to

—- integrates high-frequency styles into a common style file

We made a common style file that contains almost all of the high-frequency CSS.

It has the following types of CSS properties:

├ ─ SCSS - common | ├ ─ border. The configuration of SCSS border | ├ ─ color. The configuration of SCSS color | ├ ─ default. The SCSS default configuration | ├ ─ flex. SCSS configuration flex | ├ ─ fontSize. SCSS configuration font | ├ ─ heightWidth. SCSS configuration height to width | ├ ─ index. The CSS SCSS packaged into CSS | ├ ─ index. Min. CSS SCCS packaged into compression CSS | ├ ─ index. The SCSS Entrance | ├ ─ marginPadding. SCSS configuration spacing | ├ ─. Other SCSS configure other | └ position. The position SCSS configurationCopy the code

Principle: we through THE SCSS function, can achieve the traversal of some common classes, by compiling batch output. Such as:

$color0:#fff;
$color1:#4c84ff;
$color-2 :# 485465;
$color-3 :#78879c;
$color-4 :#a8b4c4;
$color-5 :#FFB6D4;
$color-6 :#c3cdd9;
$color-7 :#e7ebf1;
$colorEight:#f7f8fd;
$color9:#f4f9ff;
$color-10 :#37c6b0;
$color11:#ffb64d;
$color-12 :#fa5555;
$color13:#959FAE;
$color- 14:#F7F7FA;
$color15:#FFFBF6;
$color- 16:#D4DAE2;
$color- 17:#FDF7F0;
$color18:#B5C1D2;

$color-list:(
(0,$color- 0), (1,$color1), (2,$color- 2), (3,$color- 3), (4,$color- 4), (5,$color- 5), (6,$color- 6), (7,$color- 7), (8,$color- 8), (9,$color- 9), (10,$color- 10), (11,$color- 11), (12,$color- 12), (13,$color- 13), (14,$color- 14), (15,$color- 15), (16,$color- 16), (17,$color- 17), (18,$color- 18)); @each$label.$value in $color-list {
    .col-#{$label} {
        color: $value
    };
    .bg-#{$label} {
        background:$value; }}Copy the code

Using this common library to write the previous component, we can see that the style has disappeared.

<template>
  <div
    class="flex"
    :class="url ? 'pointer' : ''"
    @click.stop="link"
  >
    <div class="flex1 flex-col ellipsis">
      <div class="f-s-16 bold col-2 l-h-20 m-b-8 m-t-12 ellipsis">
        {{ title }}
      </div>
      <div class="f-s-14 col-2 l-h-18 ellipsis">
        {{ content }}
      </div>
    </div>
    <div class="w-64 h-64 m-l-20 brs2 overflow-hidden">
      <el-image
        class="w-100p h-100p"
        :src="image"
        fit="cover"
      />
    </div>
  </div>
</template>
<script>
export default {
    ...
};
</script>
Copy the code

You hardly need to write styles for divs, just import them from the public library.

We made a little tool called CSS – CLI that can pull templates directly to the local

Github.com/yangfan0095…

npm i -g css-cli

CSS – CLI create [generated CSS folder name]

You can generate CSS templates and SCSS templates

You can use this folder by placing it in your own project. Because we want to maximize customization, we’re giving you a basic CSS. Users can configure the amount of CSS rendering according to their actual situation, such as:

@for $num from 0 through 150 {
  .w-#{$num} {
    width: #{$num}px;
  }
  .min-w-#{$num} {
    min-width: #{$num}px;
  }
  .max-w-#{$num} {
    max-width: #{$num}px;
  }
  .h-#{$num} {
    height: #{$num}px;
  }
  .min-h-#{$num} {
    min-height: #{$num}px;
  }
  .max-h-#{$num} {
    max-height: #{$num}px;}}Copy the code

Use SCSS-package directly for quick introduction

step1: npm i scss-package –save

Step2: create the SCSS file index. SCSS in the project and configure the default variable in the introduction header

// Customize SCSS variable Settings$color-list:(
(0,#fff),
(1,# 333),
(2,# 666),
(3,# 999),
(4,#fb685d),
(5,#12C286),
(6,#E5E5E7),
);

$maxHeightWidth : 200;
@import '~scss-package/index.scss'
Copy the code

Variable configuration table

/ / border - radis configuration$minBrs : 0;
$maxBrs : 150;
$brsList: 50, 60; // Configure the color$color-list:(
(0,#fff),
(1,# 333),
(2,# 666),
(3,# 999),); / / configure flex$minFlex : 0;
$maxFlex: 10; // Set the font size$minFontSize : 0;
$maxFontSize : 50;
$fontSizeList: 100200300400500600; // Configure the width and height$minHeightWidth : 0;
$maxHeightWidth : 150;
$heightWidthList: 160170180190200250300350400,45,500,550,600,700,800,900; // Configure spacing$minMarginPadding: 0;$maxMarginPadding: 30;$marginPaddingList: 40,50,60,70,80; // Configure the distance$minPosition : 0;
$maxPosition : 50;
$positionList: 60,70,80,90,100;Copy the code

The more file can be overwritten directly from the source file

scss-package

Question

1 Will CSS report be large?

A: The size is self-controlled, and the default size is only 30KB.

Both attributes such as height, width, the default configuration 1-150, and 160170180190200250300350400,45,500,550,600,700,800,900. Basically can meet the actual demand, if necessary can expand and shrink.

Real user experience

For general management systems such as elemental-UI ant-Design, you can write almost no additional styles and for H5 CSS you can almost cut the number of styles in half

Team Usage

At present, there are three internal projects using this method, and the effect is good.

conclusion

  • It’s easy enough to introduce a public file
  • Almost every project can use these common styles at high enough frequencies
  • Since using it, you can get off work early!