如何流暢地開(kāi)始你的前端工作？切圖仔們看過(guò)來(lái)——CSS篇

時(shí)間：2023-07-25 02:57:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-25 02:57:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何流暢地開(kāi)始你的前端工作？切圖仔們看過(guò)來(lái)——CSS篇：原文出自摸魚(yú)族APP

還記得我剛開(kāi)始做前端的時(shí)候，代碼根本沒(méi)有規(guī)范可言，開(kāi)發(fā)過(guò)程那叫一個(gè)慘不忍睹啊。又因?yàn)榍岸碎_(kāi)發(fā)的特殊性，寫(xiě)一個(gè)頁(yè)面時(shí)思路經(jīng)常要在HTML、CSS、JS三種語(yǔ)言邏輯完全不一樣的代碼中來(lái)回切換，不僅搞得自己痛不欲生，而且經(jīng)常寫(xiě)出來(lái)的頁(yè)面和自己預(yù)想的牛頭不對(duì)馬嘴。




現(xiàn)在，每當(dāng)我回想起過(guò)去那痛苦的經(jīng)歷，我都不禁的為目前正在經(jīng)受這些痛苦的初級(jí)前端工程師（切圖仔）們感到無(wú)比的……竊喜，終于輪到你們了吧哈哈哈哈?。。。ú皇?br>
所以，為了讓更多剛?cè)胄械某跫?jí)前端工程師們擁有一個(gè)愉快又絲滑的開(kāi)發(fā)體驗(yàn)，我整理了一些我認(rèn)為特別實(shí)用，而且對(duì)你的（初級(jí)）前端開(kāi)發(fā)工作有直接效果的工具類網(wǎng)站。考慮到本篇文章的受眾可能是剛?cè)胄胁痪蒙踔潦沁€沒(méi)入行的小伙伴，那我會(huì)結(jié)合這些工具網(wǎng)站的功能、使用方法和使用場(chǎng)景來(lái)進(jìn)行介紹，希望能給大家?guī)?lái)實(shí)質(zhì)性的幫助。

CSS工具篇

1. docsmall在線多格式圖片壓縮

docsmall是一個(gè)便捷的在線圖片壓縮網(wǎng)站，它的優(yōu)點(diǎn)就是功能免費(fèi)，操作簡(jiǎn)單，頁(yè)面簡(jiǎn)潔無(wú)雜亂廣告，能滿足大部分圖片格式的壓縮需求。圖片文件對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，是特殊又重要的一個(gè)存在，它作為網(wǎng)站資源、數(shù)據(jù)內(nèi)容、標(biāo)志性符號(hào)等來(lái)說(shuō)，都是必不可少的。所以一個(gè)“好”的圖片，不僅能夠提升頁(yè)面的感觀，還能有效地提升網(wǎng)站的加載速度。所以能夠高質(zhì)量又低內(nèi)存地處理好圖片是至關(guān)重要的，細(xì)心的前端工程師在優(yōu)化網(wǎng)站時(shí)便會(huì)盡可能的壓縮網(wǎng)頁(yè)的本地資源。

2. iconfont圖標(biāo)庫(kù)

iconfont是阿里巴巴旗下的一款圖標(biāo)組件庫(kù)，它提供圖標(biāo)的自定義配色，大小選擇以及多種開(kāi)發(fā)、設(shè)計(jì)用格式的輸出，只要注冊(cè)并且實(shí)名認(rèn)證后，內(nèi)部的資源便是可以免費(fèi)使用的了。在互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)中，icon是一個(gè)非常重要的存在，但是對(duì)于初級(jí)的前端工程師，如果沒(méi)有專業(yè)的設(shè)計(jì)師來(lái)輔助的話，可能就需要自己來(lái)敲定這些icon了，而這個(gè)網(wǎng)站便解決了這個(gè)沒(méi)有設(shè)計(jì)師的問(wèn)題，你可以在iconfont中搜索任何你想要的icon主題，比如我上圖搜的home，在軟件中就是主頁(yè)的意思，那么搜出來(lái)就是我們經(jīng)常看到的代表主頁(yè)的圖標(biāo)。

隨機(jī)點(diǎn)一個(gè)icon的下載按鈕，就能看到該icon的操作面板

可以看到圖標(biāo)作者、所屬系列、配色、文件輸出幾個(gè)板塊，簡(jiǎn)潔易懂?；旧峡梢詽M足開(kāi)發(fā)工作中對(duì)一個(gè)icon圖標(biāo)的所有需求，并且下面的“復(fù)制SVG代碼”是一個(gè)對(duì)前端來(lái)說(shuō)很棒的功能，復(fù)制后直接粘貼到對(duì)應(yīng)HTML代碼位置即可完成圖標(biāo)的使用。

3. materialpalette軟件設(shè)計(jì)用主題顏色搭配

materialpalette是一款專門(mén)為移動(dòng)端APP設(shè)計(jì)用的主題顏色搭配網(wǎng)站，里面主題色基本都是符號(hào)現(xiàn)在軟件設(shè)計(jì)扁平風(fēng)格審美的顏色，用設(shè)計(jì)術(shù)語(yǔ)來(lái)說(shuō)就是顏色灰度比較高，看起來(lái)比較純，提供主色、亮色、暗色、文字色等系列顏色建議，并且支持兩種顏色的混合搭配。

我相信大部分的初級(jí)前端開(kāi)發(fā)者的工作往往是設(shè)計(jì)開(kāi)發(fā)兩塊包的，所以對(duì)于偏向于開(kāi)發(fā)而缺乏審美的程序員，一個(gè)能幫你負(fù)責(zé)好顏色挑選的網(wǎng)站是非常讓人有安全感的，并且能將更多精力放在開(kāi)發(fā)上。

4. RGB與16進(jìn)制顏色在線轉(zhuǎn)換

和標(biāo)題一樣，這個(gè)網(wǎng)站工具就是提供RGB顏色和16進(jìn)制顏色轉(zhuǎn)換功能的。如果你了解計(jì)算機(jī)顏色的解釋機(jī)制的話，那么就會(huì)覺(jué)得這是個(gè)可有可無(wú)的功能（大不了自己算唄）。但是，如果在你的工作中有需要和設(shè)計(jì)師對(duì)接部分的話，你就會(huì)發(fā)現(xiàn)這是個(gè)能節(jié)省很多時(shí)間的網(wǎng)站，因?yàn)樵趯?duì)接的過(guò)程中，常常會(huì)碰到格式不匹配的情況，比如設(shè)計(jì)師給的是16進(jìn)制顏色，但你需要的是rgb格式的顏色，為了避免二次對(duì)接的時(shí)間浪費(fèi)，就只能自己來(lái)轉(zhuǎn)換了，那么這個(gè)網(wǎng)站就是你的不二之選。

5. cubic-bezier過(guò)渡動(dòng)畫(huà)貝塞爾曲線可視化

這是一個(gè)可以自己設(shè)置過(guò)渡動(dòng)畫(huà)的貝塞爾曲線參數(shù)，并進(jìn)行動(dòng)畫(huà)的可視化預(yù)覽的一個(gè)網(wǎng)站。說(shuō)到貝塞爾曲線可能大家會(huì)比較陌生，但在今年上半年很多人關(guān)注的小米花200萬(wàn)買logo事件中，那個(gè)新的logo就是使用貝塞爾曲線對(duì)原logo做了一個(gè)邊角處理。

在前端的CSS動(dòng)效開(kāi)發(fā)中，transition的貝塞爾曲線是一個(gè)非常重要的參數(shù)，用好了往往能獲得意想不到的動(dòng)畫(huà)效果，只是這個(gè)參數(shù)都被默認(rèn)的幾個(gè)過(guò)渡類型代替了，導(dǎo)致它很容易被大家忽略。如果你對(duì)前端的動(dòng)畫(huà)特別感興趣，那么一定不要錯(cuò)過(guò)這個(gè)網(wǎng)站。

6. sassmeister SCSS轉(zhuǎn)CSS工具

這是一個(gè)自動(dòng)將SCSS樣式語(yǔ)言處理成CSS樣式語(yǔ)言的一個(gè)網(wǎng)站，只要將原本的SCSS代碼粘貼在左邊的框里，網(wǎng)站就能自動(dòng)完成轉(zhuǎn)換并輸出。

在前端開(kāi)發(fā)的工作中，大多數(shù)人都會(huì)使用邏輯性更強(qiáng)的SCSS來(lái)編寫(xiě)樣式。但是SCSS只能作為一個(gè)CSS的翻譯工具使用，并不能代替CSS的樣式功能，所以當(dāng)你原本用SCSS寫(xiě)的頁(yè)面需要移植的時(shí)候，這就會(huì)成為一個(gè)很麻煩并且很沒(méi)價(jià)值的工作。而這個(gè)網(wǎng)站就有效的解決了這一需求。

以上就是CSS篇的前端開(kāi)發(fā)輔助工具了，手打不易，覺(jué)得有用的小伙伴可以評(píng)論點(diǎn)贊轉(zhuǎn)發(fā)支持一下噢。

原文出自摸魚(yú)族APP