An inexperienced front-end engineer, what are the common problems when writing CSS?

BOM485480 2021-02-22 23:22:22
inexperienced front-end end engineer common

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 .
 Insert picture description here
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 .


  1. How to insert an element into the specified index of an array?
  2. 配置证书使得ngnix能够发布https的可信网站
  3. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  4. 前端url链接带的参数加密
  5. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  6. Is react server components OK?
  7. Summary of front end basic knowledge (4) - webpack
  8. Sass nesting rule
  9. 前端三大框架:数据绑定与数据流
  10. axios 源码阅读(一)--探究基础能力的实现
  11. Javascript中的事件冒泡与捕获
  12. #研发解决方案#易车前端监控系统
  13. 【JS】877- 35 个 JavaScript 的奇葩知识,长见识了!
  14. #研发解决方案#易车前端监控系统
  15. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  16. Front end, school recruitment, Taobao, guide
  17. Front end, social recruitment, Taobao, guide
  18. javascript 十大经典排序
  19. Draw a mellow cactus with the boneless technique of Meticulous Brushwork
  20. HTTP 1.x 學習筆記 —— Web 效能權威指南
  21. Vue3元件(九)Vue + element-Plus + json = 動態渲染的表單控制元件
  22. 我的 HTTP/1.1 好慢啊!
  23. Vue為何採用非同步渲染
  24. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  25. Front end monastery
  26. How to quickly understand a new front end project?
  27. webpack4.X核心工具库之tapable实例对象Hook
  28. webpack4.X核心工具库之tapable实例对象Hook
  29. C++使用libcurl进行http通讯
  30. Can be directly used in HTML special character table Unicode character set
  31. C++使用libcurl进行http通讯
  32. Java traverses list < string > and takes out the string elements in it, and splices them with ","
  33. Self taught web front end more than two months, talk about my harvest and progress, learning summary
  34. vue 中使用 css 变量
  35. 深入了解React中state和props的更新
  36. 百度分享不支持https的解决方案
  37. [practical] ABAP mail sending (HTML + attachment)
  38. [practical] ABAP mail sending (HTML + attachment)
  39. Teach you how to select products with less profit and competition in Amazon Product Development (1)
  40. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  41. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  42. Vue-Cli 创建vue3项目
  43. Go in the front of the progress of u boot v7.0 U disk boot disk production tools
  44. 使用NTLM的windows身份验证的nginx反向代理
  45. Rust教程:针对JavaScript开发人员的Rust简介
  46. 使用 Serverless Framework 部署个人博客到腾讯云
  47. #研發解決方案#易車前端監控系統
  48. Vue changes localhost to IP address and cannot access
  49. JavaScript进阶学习
  50. HTML5 from entry to proficient, realize annual salary 10W +, zero basic students must see
  51. Vue:vuex状态数据持久化插件vuex-persistedstate
  52. Vue source code analysis - start
  53. Vue -- the child component calls the method of the parent component and passes parameters --- props
  54. React-Native 获取设备当前网络状态 NetInfo
  55. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  56. How to learn HTML5? How can Xiaobai start HTML5 quickly?
  57. HTML + CSS detailed tutorial, this article is enough, but also quickly save
  58. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
  59. Why Vue uses asynchronous rendering
  60. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装