This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

The author section is not high, recently do more is cut map aspects of work, for some of the CSS just master, especially flex layout, is a good understanding of it, the following make a summary:

1. The CSS:

Here are some standard things, as an engineer or need to develop good habits.

1.1 name:

Take yourself as paoding, demand is the cow you want to solve, split the page into a clear structure, conducive to subsequent maintenance.

The React component can be split in any way you want. The relationship between the company stack is not involved here, mainly for vue2. X

🚀 Component CSS naming Precautions:
  • componentcomponent, blockblockAnd pageviewCapitalize the first letter,Component nameThe outermost easyclassThe name
    • Such as:TheIcon.vueComponent, thenTheIconThe outermost layer of a componentclassName is thethe-icon(Capital letters need to be changed-Make a connection)
  • For pages with complex structure levels, to avoid too many-(such as:the-icon-container-content-info-text...) case can be on the insidesub-blocktheTo rename

1.2: CSS

el-scroll-barThe use of:

<template> <div style="height:600px;" > <el-scrollbar style="height:100%"> <div style="width:700px; height:700px; border:solid;" > </div> </el-scrollbar> </div> </template>Copy the code

Single-line text overflow needs points:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
Copy the code

flexAlign the last line of the layout left:

Take the case of three columns per row:

The central idea of 🚀 is:

  • The outer layerThe justify - content: flex - start
  • forPink in the middleFor the part of3n-1Through thecssthenth-child(3n-1)Find the middle element and addmargin-leftandmargin-rightvalue

2. Component packaging:

From the complexity of “solution-structure” :

  • Component component: Can be understood as a puzzleMinimum structural element, first break the reusable departments on the page into components –component, independent encapsulation, components do not involve business logic processing, similarreactIn theA fool components
  • Piece of block,: components assembled into blocks, involving business processing, requests, post-request data processing, and so onreactIn theSmart components
  • Page view: Pages just have variousblockPieces of Mosaic

2.1 Encapsulation of components involving paths:

Take the TheIcon component for example:

SRC require():

  • Don’t require: SRC = “‘.. ‘/img/image.jpg'” is parsed as a string

    • <img src=".. <img: SRC ="'.. /img/image.jpg'"Copy the code

  • Using the require:

    • Src1: the require (".. / img/image1. JPG '), src2: the require (".. /img/image2.jpg'), index:1, <img: SRC ="index = 0? Src1: src2"Copy the code
<template> <img class="icon-image" :class="iconClass" :src="require(`@/assets/images/${name}.png`)" :style="{ width, height, }" @click="iconClick" /> </template> <script> export default { data() { return {}; }, computed: { iconClass() { return `icon-image-${this.size}`; }, }, props: { name: { default: '', type: String, }, width: { default: '', type: String, }, height: { default: '', type: String, }, size: { default: 'normal', type: String, }, }, methods: { iconClick() { this.$emit('iconClick'); ,}}}; </script> <style lang="scss" scoped> .icon-image { display: inline-block; vertical-align: middle; } .icon-image-normal { width: 24px; height: 24px; } .icon-image-small { width: 12px; height: 12px; }. Icon-image-big {width: 38.5px; Height: 32.5 px; } </style>Copy the code

3. Vscode shortcut keys:

  • Code formatting:command + shift + f
  • Special symbols:Control + Command + space
  • Open terminal:control + shift + ~

4. The result:

When reviewing requirements, it is best to draw xMind brain map according to the requirements prototype diagram, so that a module will be very clear