<>CSS architecture design

As a qualified front-end developer , Stable and reliable css Code is already an essential basic skill , From the beginning css Code redundancy , until sass/less etc. css The birth of extended language ,css Also opened a different road , This article is suitable for sass/less etc. css Expand the understanding of the language and the developers who are used to using the process oriented writing method to learn , The following is an example sass take as an example .

sass It's one css Auxiliary tools for , It is mainly used in the development of programming css Zhongqu , To improve css Code management and development .

<> history

stay sass/less Before the birth of language , There are always problems for developers ,css A series of problems on the Internet , such as , Write the class names of the two buttons , They have common characteristics , Font color , frame , Spacing and so on , Some people will write like this :
.btn-theme{ border: 1px solid green; padding: 12px; width: 100px; } .btn-small{
border: 1px solid green; padding: 12px; width: 80px; }
Some people will write like this :
.btn-theme, .btn-small{ border: 1px solid green; padding: 12px; } .btn-theme{
width: 100px; } .btn-small{ width: 80px; }
however , Either way , There are many disadvantages in the development of science and technology , I hope we have our own principles , That is to try not to touch common features while not writing duplicate code , If used sass, It's perfectly inheritable :
.btn{ border: 1px solid green; padding: 12px; } .btn-theme{ @extend .btn width:
100px; } .btn-small{ @extend .btn width: 80px; }
<> practice

What are the benefits ? We can open a base class completely independently , When writing other button styles , Can not affect other buttons at the same time efficient development , In a project development , Any html element , as button,input,image,checkbox, You can write a suitable ui Base class of , So as to reduce unnecessary trouble in the future . for example , Now give me a project , Start writing css, First of all, I might :
/* base.scss */ /* button */ .base_button{ padding: 12px; border: 1px solid red
; } /* input */ .base_input{ padding: 0 12px; line-height: 30px; } /* image */
.base_mage{ ... } /* checkbox */ .base_checkbox{ ... }
Then we cut our design into pieces , Which pieces can be cut into ? At this time, we should popularize a knowledge point ,BEM: It is made up of Yandex A new idea proposed by the team CSS Class Naming method , In a nutshell , namely
modular - element - Modifier , So the blocks that we can split are clear :

* Navigation bar (nav_)
* Pop up window block (popover_)
* Dialog block (dialog_)
* Slide block (slide_)
* …
After cutting the block , Sub element , Take the pop-up window as an example , Can be around html The Semantization of is divided into two parts header-body-footer , therefore , A complete pop-up window style is basically completed :
.popver__header{} .popver__body{} .popver__footer{}
Use two underscores above , I hope he is also a special class , Not directly used , For inheritance only , One more layer can be added outside , Implement the reference to the split block
/* popver.scss */ .popver_container{ .popver_header{ @extentd .popver__header }
.popver_body{ @extentd .popver__body } .popver_footer{ @extentd .popver__footer
} }
And then we'll find out , What about the base class we wrote before ? Where does it work ? In a body
inside , We need to plug in a lot html element , here , You can inherit the base class from the body In the corresponding elements , And add special points at the same time , for example :
.popver__input{ width: 200px; color: red; @extentd base_input } .popver_body{
@extentd .popver__input @extentd .popver__body}
such , We have basically completed a project , Write for each base class , Then to the module split , Then to the preparation of special classes , inherit , And inheritance from the base class .

<> expand

above , We basically implemented a project css Foundation design and construction , We just talked about it BEM Among them B-E, What should we do to make it better M
Use it , here , The simplest way is to borrow sass Programming features of , for instance :
In the pop-up window above ,body Inside input
The width can be uncontrollable , You can have different widths in different pop ups , Height or spacing , This kind of modification can be classified as element modification , therefore , We can write like this :
/* Array variable */ $inputWidth: 200 300 400; .popver__input{ width: 200px; color: red;
@extentd base_input} .popver_body{ @each $number in ($inputWidth){
.popver_input_#{$number}{ @extentd .popver_input width: $number + px; } }
@extentd .popver__body}
such , And we did popver_input_200,popver_input_300,popver_input_400 The compilation of class name , We just need to enter the variable name
inputWidth Then add a value , At the same time, it has a certain degree of semantics for the implementation of efficient development .

<> epilogue

A complete project css Foundation construction from design to completion , The main purpose is to think : How to start from maintainability , To solve the problem of efficiency . however , More development skills , We should start with in-depth study sass/less start , Practice constantly in project development .

©2019-2020 Toolsou All rights reserved,
The 11th Blue Bridge Cup python The real topic of the University Group National Games JavaSwing To achieve a simple Lianliankan games 【Spring Source code analysis 】42-@Conditional Detailed explanation element-ui Step on pit record 2019PHP Interview questions ( Continuously updated )PHPJava Misunderstanding —— Method overloading is a manifestation of polymorphism ? First issue 500 100 million , Set up a new Department , What is Tencent going to do ? Google chrome The browser can't open the web page , But what if other browsers can open it ? Regression of dependent variable order categories (R language )【Golang Basic series 10 】Go language On conditional sentences if