学习啦——学设计>网页设计>网站建设>网站开发工具>

CSS前端开发工具哪个适合你

宇民分享

  紧跟任何开发工具包的更新都是一件需要持续努力的事,特别是前端开发工具。下面由学习啦小编为大家整理的CSS开发工具,希望大家喜欢!

  CSS开发工具

  1. 文件查看和编译

  首先,如果你还在使用命令行编译SASS,那肯定得看自动执行的过程,这里有许多你用得上的工具,我使用 Grunt-Watch,但是有很多人喜欢 Gulp-Watch。

  2. SCSS 库

  库是一个大型工具包,它包含并混合从 CSS 重置、跨浏览器背景渐变和使用黄金比例设置字体大小的便捷数学计算等的很多东西。

  主流的库:

  Bourbon

  Compass

  PostCSS

  3. Autoprefixer

  Autoprefixer 基于 https://caniuse.com 添加所需的前缀。当我单枪匹马干活时,给我节省了不少时间,强烈推荐。

  CSS前端开发工具

  1. Animate.css

  我喜欢编写我自己的 CSS 动画效果,但经常我们没有太多的时间。

  Animate.css 可以让我快速的添加和测试 CSS 动画效果,无需思考这些动画的逻辑。

  2. KSS styleguide

  KSS 允许你从你的CSS直接创建一个样式向导文件,这有很多的优点。

  配对的 KSS含有一个模块化的CSS,比如BEM,允许你可靠的创建一个可重复使用的可见样式集,你会从强大的文档中获得巨大的回报。

  你通过文档化的CSS得到正强化。

  由于文档和可视化的样式向导,组件更容易被找到和重用-不用怀疑,如果已经建立了一个类似的组件!

  3. CSS minification with CSS NANO

  自动缩小我编写的CSS文件。

  CSSNANO 也可以删除所有不必要的或过时的浏览器前缀,如果有的话,以及重复的类。

  其他CSS前端开发工具

  1.CSS 预处理器

  超过 63% 的受访者使用 Sass – 无可争议的预处理器冠军。8%的受访者还使用 PostCSS,虽然它通常与其他预处理器结合使用以提供有用的功能 – 如AutoPrefixer( 65% 的受访者采用)。

  近 14% 的受访者不使用预处理器,而更喜欢使用原始 CSS 代码。当你认为它是最简单的(和最好的)开始前端开发的方式时,这个比例似乎有点低。如果 86% 的开发人员使用 CSS 预处理器,我预计平均每个网站的CSS文件请求应该低于7.2个。

  近 70% 的受访者尝试过 Less ,19% 的受访者尝试了 Stylus 。80% 从未听说过 Rework。

  2.CSS 命名方案

  46% 的受访开发人员使用命名方案,但是对于那些将 CSS 水平自我评价为高级或专家级别的人来说,这一比例上升到 57% 。

  最受欢迎的选择是 BEM ,占40%,其次是 CSS模块(CSS Modules)(16%),OOCSS(15%)和 SMACSS(13%)。