几款开发 CSS 最好的前端开发工具
紧跟任何开发工具包的更新都是一件需要持续努力的事,特别是前端开发工具。
把你的注意力从方法和技术的洪流中移开一会,你就可能会错过什么! 上周我遇到我的一个前端开发朋友,他很兴奋地跟我谈论他使用的一些新工具。其中最有意思的是使用 Grunt 来编译 SCSS。
人们很容易忘记不是每个人都和你走在同一条路上。他们或是有使用限制,或是视野狭窄,无法洞悉周遭的环境。我使用 Grunt 和使用 SCSS 一样久。听他讲起他不得不通过命令行可以手动触发编译之后,我很是痛苦。所以我想分享一些我经常使用的前端开发工具。(尤其是CSS)
极为重要的前端开发工具
1. 文件查看和编译
首先,如果你还在使用命令行编译SASS,那肯定得看自动执行的过程,这里有许多你用得上的工具,我使用 Grunt-Watch,但是有很多人喜欢 Gulp-Watch。
一些 IDE 内建预处理器,可以看看到底哪个适合你。
2. SCSS 库
库是一个大型工具包,它包含并混合从 CSS 重置、跨浏览器背景渐变和使用黄金比例设置字体大小的便捷数学计算等的很多东西。
主流的库:
- Bourbon
- Compass
- PostCSS
我使用 Compass 好几年了,这是一个很棒的工具集。
但是我发现它能做的远超我的实际需要 。我用在 Compass 上学到的知识创建了一个轻量级的自定义栈插件,它使得 scss 编译时间从4秒降低到几乎为零。
3. Autoprefixer
不必担心浏览器前缀问题了!
Autoprefixer 基于 https://caniuse.com 添加所需的前缀。当我单枪匹马干活时,给我节省了不少时间,强烈推荐。
4. Animate.css
我喜欢编写我自己的 CSS 动画效果,但经常我们没有太多的时间。
Animate.css 可以让我快速的添加和测试 CSS 动画效果,无需思考这些动画的逻辑。
5. KSS styleguide
KSS 允许你从你的CSS直接创建一个样式向导文件,这有很多的优点。
配对的 KSS含有一个模块化的CSS,比如BEM,允许你可靠的创建一个可重复使用的可见样式集,你会从强大的文档中获得巨大的回报。
KSS Styleguide is one of my favorite front end development tools
- 你通过文档化的CSS得到正强化。
- 由于文档和可视化的样式向导,组件更容易被找到和重用-不用怀疑,如果已经建立了一个类似的组件!
6. CSS minification with CSS NANO
自动缩小我编写的CSS文件。
Minification for front end development
CSSNANO 也可以删除所有不必要的或过时的浏览器前缀,如果有的话,以及重复的类。
5. KSS styleguide
KSS 允许你从你的CSS直接创建一个样式向导文件,这有很多的优点。
配对的 KSS含有一个模块化的CSS,比如BEM,允许你可靠的创建一个可重复使用的可见样式集,你会从强大的文档中获得巨大的回报。
- 你通过文档化的CSS得到正强化。
- 由于文档和可视化的样式向导,组件更容易被找到和重用-不用怀疑,如果已经建立了一个类似的组件!
6. CSS minification with CSS NANO
自动缩小我编写的CSS文件。
CSSNANO 也可以删除所有不必要的或过时的浏览器前缀,如果有的话,以及重复的类。
相关文章
- 11·灵魂前端工程师养成-CSS最强大的布局Grid
- 前端的设计模式系列-外观(门面)模式
- 前端代码层面优化的一些想法
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- 有哪些前端面试题是必须要掌握的
- 后端转前端的小老弟突然收割大厂offer,真相竟然是
- 前端面试CSS相关(二)
- 数据结构面试常见问题总结怎么写_前端数据结构与算法面试题
- 前端安全问题之XSS
- js事件循环与macroµ任务队列-前端面试进阶
- 从头学前端-CSS基础05
- 路由懒加载的原理及实现_前端路由懒加载
- 前端使用ajax_ajax属于前端吗
- 一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放(显示文本、应用等项目的大小)概念
- 前端面试之HTML && CSS
- 简单策略让前端资源实现高可用
- 中级前端面试题(附答案)
- 前端高频手写面试题总结
- 前端入门教程:CSS标准盒模型和怪异盒模型区别
- Django 前端BootCSS 实现分页
- 阿里前端二面必会react面试题总结1
- 一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放概念
- 重温前端-css篇
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- 现代前端技术解析(2)详解架构师
- 前端面试题之Html和CSS详解编程语言
- CSS教程之css选择器、属性、值
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)