全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:15617636856

郑州网站建设

当前位置: 首页 > 新闻资讯>>如何优雅地编写CSS?

如何优雅地编写CSS?

作者:郑州网络公司发布时间:2023-09-13 14:25:25查看次数:来源:网络

从历史上看,前端被认为是二等公民,通常是由设计师或特别的人来实现的,他们通常不太了解编程 —— 通常是一些后台的模板语言。早在10多年前,这并不是一个大问题,因为一个典型的Web应用程序的大小并不大,所以使用类的样式设计已经很好了。不理想,但不是很烦人。 虽然互联网在不断的增长,应用程序变得越来越大,在某种程度上,人们开始意识到CSS有一系列问题,这些问题变得越来越严重。

首先想让css变得容易维护的话,一定要养成良好的编码习惯。1. 不要出现层级太深的嵌套,否则将极其难以管理2. 将常用的样式抽离成为独立的类,增强复用性,这一点可以学习Bootstrap的Utilities3. 类的命名一定要有规则的进行,乱起名会影响你维护(可以参考BEM,但更建议自己总结一个适用的规则)然后你要善用工具,所见即所得的纯Css肯定无法满足大文件的管理,所以首推的是使用Sass等处理器(你也可以选择Less、Stylus),它能让你使用变量、函数、规则嵌套等语法,并轻松编译成Css,大大提高编写的速度(但也会提高调试的成本)。它的其中一个功能是将多个文件智能合并成一个文件,这肯定是你想要的。京东的代码肯定也是从多个文件合并的。如果Scss无法做到你想要的事,还可以用PostCss这个新的工具平台,像自动添加浏览器兼容前缀的Autoprefixer,自定义语法,代码压缩、代码排序,但这需要更多的学习相关知识了。如果向更严格的管理代码的话,建议使用Stylelint等工具,来规范你的代码格式。CSS并不是一种编程语言 —— 尽管引入了变量,但它没有函数、条件和循环的功能,因此没有办法自动化生成代码。如果你基于代码中的某些属性创建类名,那么必须在CSS代码中重复所有这些属性,这是不可避免的。对于变量来说也是一样的,如果你需要把所有的green颜色换成稍微不同的颜色。有时候颜色可能是一样的,但在语义上是不同的颜色(比如primary和header-title)。所有这些都导致了预处理器的诞生,这些语言与CSS非常相似,但具有扩展功能 —— Sass、LESS、Stylus和PostCSS。

一是使用VSCode、Atom等与Node整合的编辑器,他们可以安装各类的插件,Sass、PostCss、Stylelint等工具都可以与之整合。在编写的过程中自动完成处理。二是使用现在业内流行的工作流,自己安装Node环境,使用Grunt、Gulp、Webpack等工具来整合Sass、PostCss、Stylelint等组件,成为定制化的,这比第一种需要更多的Node知识,建议初学者慎用。

站内文章:均为188bet博彩体育app下载方式 各部门原创内容如需转载请著名本文网站链接://www.mcissock.com/new/26960.html未经允许转载要受法律责任,如需转载请联系269247937@qq.com


[如何优雅地编写CSS?]

本文链接://www.mcissock.com/new/26960.html
tags:郑州网站建设郑州网站制作郑州网站设计郑州建站公司郑州网站优化郑州做网站郑州小程序开发郑州网络公司
网页是否收录:
返回目录 在线咨询

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。

  • 返回顶部
  • 15617636856
  • QQ在线
  • 微信二维码
0
Baidu
map