Phenomenon:

I don’t know if you get the feeling that sometimes developing a front end page looks simple, but it takes us a long time to finish.

why

Interruptions are a major impediment to productivity.

Problem analysis:

Vue website links: v3.cn.vuejs.org/guide/singl…

The following information is from vUE’s official website:

​

How about separation of concerns? Some users from a traditional Web development background may be concerned that SFC mixes different concerns in one place – HTML/CSS/JS should be kept separate! To answer this question, we must agree that separation of concerns is not equal to file type separation. The ultimate goal of engineering principles is to improve the maintainability of the code base. Separation of concerns, when applied conventionally as separation of file types, does not help us achieve this goal in the context of increasingly complex front-end applications. In modern UI development, we’ve found that rather than splitting the code base into three huge interwoven layers, it makes more sense to divide them into loosely coupled components and combine them. Within a component, its templates, logic, and styles are intrinsically coupled, and matching them can actually make the component more cohesive and maintainable. Note that even if you don’t like the idea of a single-file component, you can still take advantage of its hot overloading and precompilation capabilities by using SRC imports to separate JavaScript from CSS into a separate file.

Here it is: templates should be coupled, logic and style should not be separated.

Vue3 Composition API introduces new concepts

Link 1:24 Kcs.github. IO /vue3_study/… Link 2: morioh.com/p/2feca181b…

Problem with Option API

In traditional Vue OptionsAPI, to add or modify a requirement, you need to move the scroll bar up and down repeatedly in data, Methods, and computed

Here’s a picture that might be clearer: ​

Conclusion: From the above information analysis, the CompositonAPI is much better than OptionsAPI in terms of development efficiency and code integrity.

The vuE3 website also introduces the concept of ergonomics

Conclusion the analysis

Vue3 is also improving the feel and efficiency of every developer at the code level. Its essence is to solve the problems that are interrupted by itself and reduce its efficiency. After in-depth analysis, the main reason for the interruption is logical incoherence, which requires modification in data, methods, computed data, repeatedly moving the scroll bar up and down, or constantly switching files.

How to continue to improve development efficiency

Beyond the help the open source community provides us, how can we improve development?

New ways to improve efficiency:

HTML and CSS are coupled.

Problem analysis

Achieve the following page effect:

Implementation scheme 1: adopt BEM specification

BEM

One of the most popular naming conventions is BEM (block, Element, Modifier). Target security is made easier by prefixing each element with its parent block module. BEM also helps eliminate page and body class dependencies on nested or additional styles. Rule: The underscore (__) is used to distinguish elements, while the hyphen (–) is used to modify elements. Here’s a real world example…

<template> <div class="list"> <div class="item"> <img src="" alt="" class="item-img" /> <div><span Class ="item-brand"> Samsung </span><span class="item-name"> P600 </span></div> <div class="item-price"> <span Class = "item - price__text" > price: <span ><span class="item-price__value">¥600</span> </div> </div> </div> </template> <style lang="less" scoped>. Item { .item-img { } .item-name { } .item-price { .item-price__text { } .item-price__value { } } } </style>Copy the code

​

This is a nice way to define the rules used by the class, but it still leads to logical fragmentation when writing code.

Implementation scheme two: using ACSS specification

ACSS

Consider how to design the interface of a system. Atoms are the most basic properties for creating a block, such as a form button. A molecule is a combination of Atoms, such as Atoms, in a form containing a label, an input box and a button. The Organisms are a combination of Molecules, such as the top area of a website, which contains the title of the website, the navigation, etc. And the Templates are a combination of Organisms. Like the layout of a website page. The last page is the special template.

For example:

<! -- HTML --> 
<fieldset> 
  <label for="field" class="arial-font-family larger-font-size text-color mbm">
    Form Label
  </label>
</fieldset>

/*CSS*/ 
<style>
.label-font-family { font-family: arial; } 
.larger-font-size { font-size: 150%; } 
.text-color { color: # 313131; } 
.mbm..mvm..mam { margin-bottom: 10px ! important; }
</style>/ / nausea<span class="display-block blue-box font-arial padding-20">Party like it’s 1999!</span> 
<span class="display-block blue-box font-arial padding-20">Hey, havelately?</span> 
<span class="display-block blue-box font-arial padding-20">Wassuuuuuuup!</span>

Copy the code

Advantages:

  • High code reuse rate, almost 100%, do not write much CSS
  • The name shows the meaning. Class name, you know what the CSS inside is.

Disadvantages:

  • Defining atomic structures is complicated, and it is difficult to define all atomic structures without reuse. But there is a CSS library for us to do.
  • Since classes are made up of CSS, you’ll find CSS writing stinky and long. But it’s actually in use: The Twitter Bootstrap button generator.

The biggest problem with using ACSS is that in the real development process, some properties cannot be atomized, such as font color, font size, background color, etc., so CSS needs to be written, which cannot achieve true atomization.

The problem

So what are some ways to reduce the fragmentation of WRITING HTML and CSS?

Method 3: ICSS

According to the above situation, I have come up with a third way of writing. You can look at the case first (or the case above is a demo).

<template> <div class="list"> <div class="item"> <img src="" alt="" class="auto" style="width: 300px; <div><span class="bold"> <span> P600 </span></div> <div class="flex" style="font-size: 14px; <span style="color: #999"> Red "> selections of 600 < / span > < / div > < / div > < / div > < / template > < style lang =" less "scoped > / / @ import url (); Public CSS class.auto {margin: 0 auto; } .bold { font-weight: bolder; } .flex { display: flex; } .relative { position: relative; } </style>Copy the code

We can divide CSS into two categories, those that can be exhausted and those that can’t be exhausted. The CSS that can be exhausted can be defined in advance, and the CSS that cannot be exhausted can be written in inline style.

Due to the main use of ACSS mode + inline style inline; So I’ll call it IASS;

The advantages and disadvantages:

Advantages:

  1. You can reduce CSS redundancy and CSS volume.
  2. When writing complex pages, reduce repeated scrolling of scroll bars and improve development efficiency.
  3. You don’t have to worry about class names anymore.
  4. Because it does not have a class name, it is easier to use in Lowcode and design-to-code tools.
  5. The code feels more readable.

Disadvantages:

  1. Changed the original understanding of writing code.
  2. The need to remember some of the atomic CSS in advance increases the memory cost.
  3. Change the old code habits, will be a little uncomfortable.

Summary: This is my front-end code thinking, and use in the work, after forming this habit, will find that the efficiency of writing code has been improved, but because there is no CSS interruption, writing code better.

​

I ordered the CSS atoms

.w_100{
  width: 100%;
}

.h_100 {
	height: 100%;
}
.border-box {
	box-sizing: border-box
}
.auto{
  margin:0 auto;
}
.ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bold {
	font-weight: bold;
	font-weight: bolder
}
.center {
	text-align: center
}

.right-align {
	text-align: right
}

.justify {
	text-align: justify
}

.overflow-hidden {
	overflow: hidden
}

.overflow-scroll {
	overflow: scroll
}
.inline {
	display: inline
}

.block {
	display: block
}

.inline-block {
	display: inline-block
}
.flex {
	display: flex
}
.flex-wrap {
	flex-wrap: wrap
}

.items-start {
	align-items: flex-start
}

.items-end {
	align-items: flex-end
}

.items-center {
	align-items: center
}

.items-baseline {
	align-items: baseline
}

.items-stretch {
	align-items: stretch
}

.justify-start {
	justify-content: flex-start
}

.justify-end {
	justify-content: flex-end
}

.justify-center {
	justify-content: center
}

.justify-between {
	justify-content: space-between
}

.justify-around {
	justify-content: space-around
}
.relative {
	position: relative
}

.absolute {
	position: absolute
}

.fixed {
	position: fixed
}
.z1 {
	z-index: 1
}

.z2 {
	z-index: 2
}

.z3 {
	z-index: 3
}

.z4 {
	z-index: 4
}
.circle {
	border-radius: 50%
}

.border1 {
	border-style: solid;
	border-width: 1px;
}

.border2 {
	border-style: solid;
	border-width: 2px;
}
.border3 {
	border-style: solid;
	border-width: 3px;
}
.border4 {
	border-style: solid;
	border-width: 4px;
}


Copy the code