如何流畅地开始你的前端工作？切图仔们看过来——CSS篇

时间：2023-07-25 02:57:02 | 来源：网站运营

时间：2023-07-25 02:57:02 来源：网站运营

如何流畅地开始你的前端工作？切图仔们看过来——CSS篇：原文出自摸鱼族APP

还记得我刚开始做前端的时候，代码根本没有规范可言，开发过程那叫一个惨不忍睹啊。又因为前端开发的特殊性，写一个页面时思路经常要在HTML、CSS、JS三种语言逻辑完全不一样的代码中来回切换，不仅搞得自己痛不欲生，而且经常写出来的页面和自己预想的牛头不对马嘴。




现在，每当我回想起过去那痛苦的经历，我都不禁的为目前正在经受这些痛苦的初级前端工程师（切图仔）们感到无比的……窃喜，终于轮到你们了吧哈哈哈哈！！！（不是

所以，为了让更多刚入行的初级前端工程师们拥有一个愉快又丝滑的开发体验，我整理了一些我认为特别实用，而且对你的（初级）前端开发工作有直接效果的工具类网站。考虑到本篇文章的受众可能是刚入行不久甚至是还没入行的小伙伴，那我会结合这些工具网站的功能、使用方法和使用场景来进行介绍，希望能给大家带来实质性的帮助。

CSS工具篇

1. docsmall在线多格式图片压缩

docsmall是一个便捷的在线图片压缩网站，它的优点就是功能免费，操作简单，页面简洁无杂乱广告，能满足大部分图片格式的压缩需求。图片文件对于前端开发来说，是特殊又重要的一个存在，它作为网站资源、数据内容、标志性符号等来说，都是必不可少的。所以一个“好”的图片，不仅能够提升页面的感观，还能有效地提升网站的加载速度。所以能够高质量又低内存地处理好图片是至关重要的，细心的前端工程师在优化网站时便会尽可能的压缩网页的本地资源。

2. iconfont图标库

iconfont是阿里巴巴旗下的一款图标组件库，它提供图标的自定义配色，大小选择以及多种开发、设计用格式的输出，只要注册并且实名认证后，内部的资源便是可以免费使用的了。在互联网产品的设计中，icon是一个非常重要的存在，但是对于初级的前端工程师，如果没有专业的设计师来辅助的话，可能就需要自己来敲定这些icon了，而这个网站便解决了这个没有设计师的问题，你可以在iconfont中搜索任何你想要的icon主题，比如我上图搜的home，在软件中就是主页的意思，那么搜出来就是我们经常看到的代表主页的图标。

随机点一个icon的下载按钮，就能看到该icon的操作面板

可以看到图标作者、所属系列、配色、文件输出几个板块，简洁易懂。基本上可以满足开发工作中对一个icon图标的所有需求，并且下面的“复制SVG代码”是一个对前端来说很棒的功能，复制后直接粘贴到对应HTML代码位置即可完成图标的使用。

3. materialpalette软件设计用主题颜色搭配

materialpalette是一款专门为移动端APP设计用的主题颜色搭配网站，里面主题色基本都是符号现在软件设计扁平风格审美的颜色，用设计术语来说就是颜色灰度比较高，看起来比较纯，提供主色、亮色、暗色、文字色等系列颜色建议，并且支持两种颜色的混合搭配。

我相信大部分的初级前端开发者的工作往往是设计开发两块包的，所以对于偏向于开发而缺乏审美的程序员，一个能帮你负责好颜色挑选的网站是非常让人有安全感的，并且能将更多精力放在开发上。

4. RGB与16进制颜色在线转换

和标题一样，这个网站工具就是提供RGB颜色和16进制颜色转换功能的。如果你了解计算机颜色的解释机制的话，那么就会觉得这是个可有可无的功能（大不了自己算呗）。但是，如果在你的工作中有需要和设计师对接部分的话，你就会发现这是个能节省很多时间的网站，因为在对接的过程中，常常会碰到格式不匹配的情况，比如设计师给的是16进制颜色，但你需要的是rgb格式的颜色，为了避免二次对接的时间浪费，就只能自己来转换了，那么这个网站就是你的不二之选。

5. cubic-bezier过渡动画贝塞尔曲线可视化

这是一个可以自己设置过渡动画的贝塞尔曲线参数，并进行动画的可视化预览的一个网站。说到贝塞尔曲线可能大家会比较陌生，但在今年上半年很多人关注的小米花200万买logo事件中，那个新的logo就是使用贝塞尔曲线对原logo做了一个边角处理。

在前端的CSS动效开发中，transition的贝塞尔曲线是一个非常重要的参数，用好了往往能获得意想不到的动画效果，只是这个参数都被默认的几个过渡类型代替了，导致它很容易被大家忽略。如果你对前端的动画特别感兴趣，那么一定不要错过这个网站。

6. sassmeister SCSS转CSS工具

这是一个自动将SCSS样式语言处理成CSS样式语言的一个网站，只要将原本的SCSS代码粘贴在左边的框里，网站就能自动完成转换并输出。

在前端开发的工作中，大多数人都会使用逻辑性更强的SCSS来编写样式。但是SCSS只能作为一个CSS的翻译工具使用，并不能代替CSS的样式功能，所以当你原本用SCSS写的页面需要移植的时候，这就会成为一个很麻烦并且很没价值的工作。而这个网站就有效的解决了这一需求。

以上就是CSS篇的前端开发辅助工具了，手打不易，觉得有用的小伙伴可以评论点赞转发支持一下噢。

原文出自摸鱼族APP