css预编译有哪些优缺点?

什么是CSS预编译?

CSS 预编译,就是预先编译处理CSS。它扩展了 CSS 语言,增加了变量、Mixin、函数等编程的特性,使 CSS 更易维护和扩展。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码,随后经过专门的编译工具将源码转化为CSS语法。

它从这几个方面提升了CSS开发的效率:增强编程能力;增强可复用性;增强可维护性;更便于解决浏览器兼容性。

CSS预编译的核心功能

不同的预编译器特性虽然有所差异,但核心功能均围绕这些目标打造,比如:

  • 嵌套(所有预编译器都支持的语法特性,也是原生CSS最让开发者头疼的问题之一)

  • 变量(增强了源码的可编程能力)

  • 运算(增强了源码的可编程能力)

  • mixin/继承(为了解决hack和代码复用)

  • 模块化(不仅更利于代码复用,同时也提高了源码的可维护性)

为什么要用CSS预编译?

CSS的缺点:

语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;

没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

CSS预编译的优点:

可以提供CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了开发效率。

CSS预编译的缺点

CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。更大的问题在于,预编译很容易造成后代选择器的滥用。

所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,CSS预处理器有没有解决更大的麻烦。

CSS和CSS预编译的比较

优点缺点
CSS简便、可随时随地被使用和调试

语法不够强大,模块化开发中需要书写很多重复的选择器;

没有变量和合理的样式复用机制,难以维护。

CSS预编译

提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性

调试更麻烦;

容易造成后代选择器的滥用

更多web开发知识,请查阅 HTML中文网 !!

以上就是css预编译有哪些优缺点?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏