current position:Home>[methodology 1] CSS development skills - global style setting and local style

[methodology 1] CSS development skills - global style setting and local style

2022-04-29 17:18:51Then play music and dance.

Catalog

Preface :

1. Global style and local style settings

2. Important methods to improve efficiency  

3. Important methods to improve efficiency - Centralized processing UI style  

4. Important methods to improve efficiency - Learn to copy  

5.  Ways to improve quality -flex、 percentage 、rem Layout

6. How to solve difficult and miscellaneous diseases -::v-deep Add class name  

7. Ways to improve quality : Skillfully use flex Realize element alignment 、 In the middle

8. Ways to improve quality : Skillfully use ternary expression  


Preface :

It has been developed for a long time , More and more people feel how important it is to improve development efficiency , From a static page in the first day to the present …… Probably 2 Complete all static tasks of a project in days ? There is no statistics on how long , There is no doubt about it , Now the speed of development has been qualitatively improved , I think it's time to sum up the experience , There is also this article , I think this is just the beginning , I will write more such experiences in the future .

ps: because vue It's used a lot , Mainly with vue Example ,react And others I also use , But the same way , The same thing .


1. Global style and local style settings

Please refer to the following steps , Set global css file , Follow the steps below to realize the global effectiveness of the style . This method is common to all projects

1.1 Directory structure :


2.2 index.css Set import css file


3.3 Entrance file main.js Set to global


2. Important methods to improve efficiency  

The first thing , First ask the company's UI, generally speaking , Like the size of a button , Input box size , Text font size color , Row spacing , All kinds of margins are standard , Be aware of such a situation .

To make a long story short , The first step is to ask first UI, What is fixed and universal .


3. Important methods to improve efficiency - Centralized processing UI style  

for instance , I use elementUI Component library for , They certainly don't use their styles directly in the project , You need to change the color and size yourself , From the very beginning, we devoted ourselves to a centralized file processing system for them .

Such as : newly build element-ui.css file , Here, centralized processing takes effect globally  

 

  To make a long story short , Separate and centralized processing of third parties UI library , Global effect , Greatly improved efficiency


4. Important methods to improve efficiency - Learn to copy  

The official website and e-commerce may use less , But for the background management class , Namely B End products , Many page styles and structures are actually similar , Then it's time to quickly copy .

To make a long story short , Copy pages that are similar in length , Deal with the details later .

5.  Ways to improve quality -flex、 percentage 、rem Layout

The front end has developed to today , There is almost no such thing as 1920×1080 The design drawing is fixed in a dead style , Think about the picture of the whole static page collapsing when the page size changes …… We need to consider adapting the screen to various resolutions and sizes , Traditional media queries are true and cumbersome , It is recommended to use a large number of flex Layout 、 Streaming layout and Taobao rem perhaps elementUI Framework of the el-row Such a layout , Combined use is the king !


6. How to solve difficult and miscellaneous diseases -::v-deep Add class name  

stay vue in , We just want to change the local style , And don't want to pollute the global style , Cause other pages to change , We can... Again style Medium plus scope attribute   And then all kinds of ::v-deep

  As for the method of adding class name , Please imagine such a scenario :

The global input box I originally set is long 200px, But I want the length of an input field in a form somewhere in the world to be 300px, What shall I do? ? And the reality is , Want to modify it , You must change a class name , And this class name is related to the global .

We can add a unique class name to the upper level of this input box , This allows you to control some input fields , Instead of all the input boxes .


7. Ways to improve quality : Skillfully use flex Realize element alignment 、 In the middle

In practical projects, we often face a problem :

The height of the input box should be the same as that of the button , Or this logo To center vertically , The top and bottom margins should be the same and adaptive .

We can use flex Layout :

display:flex;
justify-content: center;// Horizontal center
align-items: center;// Vertical center


8. Ways to improve quality : Skillfully use ternary expression  

In the actual project , You should often encounter such business scenarios :

Password strength verification is low, medium and high, corresponding to three colors ;

The back end returns a field , Low risk, medium risk and high risk correspond to three colors ;

We can use ternary expressions to improve efficiency , But if we need to judge twice, we don't want to write a function to deal with , have access to :class+:style The way of combination , It can make the code logic clearer , It also avoids the situation of ternary nested hell .

copyright notice
author[Then play music and dance.],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291527149647.html

Random recommended