Not conforming to the coding standard is the biggest common fault of newcomers
I suggest you read the front-end team of Tencent AlloyTeam Code specification of , There are some specifications for writing the front end , This is very suitable for a team to implement this set of specifications , Ensure code readability 、 Maintainable, etc . These specifications can effectively avoid the common problems of many novices .
One 、 Random naming
Class names use lowercase letters , To separate with a dash ,id It's named after the hump , This is the requirement in the specification , Many novices write less about development projects , Watch a lot of training videos , Many front-end learning videos are of low quality ,div、id It's all written casually ,class=“div1”,id="test1" Wait and so on , No, no, no , But not professional , If it's a big project, it's a big loss .
Two 、 Few comments and css Structural chaos
Many novice editors have problems , Don't know how to quickly annotate , I don't have the habit of writing notes ,CSS It's also to see where it's different from the design draft or the style of the web page presentation is not good , Just change to where , No, right CSS There is a complete plan for the whole file structure , No planning, no rules , Of course, I don't think it's necessary to write notes . There's even one css In the document , Repeated styles, serious coverage, etc .
3、 ... and 、 Attributes have no rules
There are empty rules , Property conflict , of no avail Tab The typesetting is ugly , The order of attributes is disordered and the readability is poor
Don't understand CSS Modular and reusable
The core is not knowing how to organize CSS, Because I have no experience in large projects before , So I don't feel CSS The need for modularity , Yes OOCSS,SMACSS etc. CSS Little is known about design patterns , For example, I haven't done anything similar to the following CSS I've modularized ：Base ( basic )、Layout（ Layout ）、Module ( modular )、State ( state )、Theme ( The skin ), When you don't have the experience of modularity , You don't have a deep understanding of CSS The necessity of programming .
Don't understand CSS Performance optimization
For example, the property disorder mentioned above , Style repetition is just one of them , There's also the transition to sub selectors 、id Selectors and class selectors, restrictive confusion, etc , Especially the layout and positioning .
Lack of knowledge
Because a lot of people learn CSS It's all about w3cshool The knowledge inside （w3cschool The knowledge is too simple ）, It seems that they can also make the web page more beautiful , But because I don't understand responsive design 、media、 Grid and so on , Yes CSS Our research is still on the surface , There are a lot of problems with the webpage . Even a lot of people are interested in CSS3 I don't have any knowledge of it .
To avoid these problems , One is to read norms , The second is to understand CSS Design patterns , The third is to study CSS performance , Fourth, to study Bootstrap etc. UI frame , Fifth, we should learn a set of front-end framework Vue perhaps React, In this way, we can improve CSS It's a new level .
I've been in the front end for years , This paper summarizes a set of intensive video and learning route for front-end learning , If there are partners interested in front-end development , Whether you want to change careers , Or college students , And those who want to improve their abilities at work web Front end party , Welcome to join my front-end development exchange group ：603985993 I hope you can communicate sincerely ！, Synchronization with enterprise requirements . Friends are learning to communicate in it , Every day, Daniel will regularly explain the front-end technology ! You can also follow my WeChat public account ：【 Front end international students 】 Update the latest technical articles every day .
Comprehensive improvement CSS The way of ability ：
One 、 Find a few commercial level design drafts to disassemble and reconstruct by yourself , For example, go to some well-known design websites to download ps Document or sketch manuscript , Reproduce them in code , And adapt to multiple terminals ;
Two 、 Go to Github Look at some representative projects , It can be downloaded from one single page Start ;
3、 ... and 、 Interpretation of the classic UI Framework source code , Understand the design concept behind it ;
Four 、 Use developer tools “ Plagiarism ” Decompose the front-end pages of well-known websites , Learn more about the code experience of commercial level works ;
5、 ... and 、 Study Webpack pack , At least understand Vue, Some web pages are written in three main frames , It's necessary to master the packer ;
6、 ... and 、 Read the front-end specification to understand the engineering in the context of teamwork ;
7、 ... and 、 understand CSS The preprocessor ;
8、 ... and 、 Go to MDN hold css Sort out the attributes of , Like pseudo classes 、 Pseudo elements , A lot of people just read some books 、 Video tutorial 、 perhaps w3cschool, It's not enough , Technical documents are far more important than textbooks , To learn any programming, we should put the technical documents first .