更愉快的書寫CSS


我在寫CSS的時候經常會碰到些麻煩事兒:

1)看上去蠻簡單的排版卻寫了很久

2)代碼寫的越來越散,總是這里補一句,那里補一句,沒有條理性

3)margin、padding、font-size等屬性在不停的重寫

效率提不上去,工期又趕,最后只能加班加點做。

后面仔細想想,其實自己可以做的更有計划性,更有條不紊的推進。

一、全局觀

我們這邊開發是按流程來進行的,UI設計沒給出,是堅決不開工的。

在UI設計給出后,最多只是做些無傷大雅的微調,這樣的話,其實在給出所有UI設計稿后,可以做個大概的評估。

將通用的組件、樣式難點、各個動畫、布局細節,了然於心,這樣在開發的時候,胸有成竹。

先來看看這次設計稿的總覽:

在看完所有頁面后,可以開始打草稿,做抽象了。

接下來的CSS開發我都會使用Sass來編寫,用Sass能更好的做模塊化開發。

 

二、通用組件

1)loading效果

基本上每次做頁面,都會有這么一個效果,所以預先准備幾個這樣的效果,會很有用處,將所有的相關代碼寫到一個文件中封裝起來。

而且設計很多時候不會考慮loading這種細節效果,最終都是自己來添加的,設計也會很歡迎你幫他分擔些工作。

我在很早以前自己寫了一套簡易的UI庫,在工作中發揮了巨大的作用。

 

2)彈出框

這個也基本可以說每次都會用到,所以封裝一個自己的彈出框很有必要。

產品、設計也經常會忽略這個效果,經常會撂下一句話“通用的就可以”,事先准備好的話,對你對我都有幫助。

這個功能不僅僅是CSS,還得需要JavaScript的支持。

我用最簡單的200行代碼封裝了彈出框,遵循開放封閉原則,並可自行擴展。

用法也特別簡單:

Alert('請選擇三張優惠券');

 

3)按鈕

UI都喜歡花式的按鈕,但我遵循的原則是,能用CSS3畫的就用CSS3畫出來,少用或不用圖片。

這樣按鈕能更通用性,各種款式的都能繼承基本款式,在基本款式上修改某些參數就能實現效果。

上面的按鈕有的大、有的小、有的方、有的園、有的下面是陰影、有的無邊框,可以用上面的代碼來概括。

按鈕特別的地方在做細調。

 

4)輸入框

輸入框,基本也是標配,同樣的,UI也喜歡花式的輸入框,我還是遵循能畫出來的就自己畫。

這次的輸入框,還是比較朴素的,沒有用誇張的表現手法展示。

 

5)字體大小與顏色

UI設計稿上都會有好多種字體,但如果要求不嚴格的話,其實可以事先設置些字體大小,直接套用。

h1~h6這6個標簽,我預先定義好了字體大小,這樣也能減少使用“p”或“span”標簽,讓網頁標簽更豐富。

顏色可以向下面這樣預先定義一下,但可能很多時候都會把顏色寫在特定樣式中,那就做個變量,放在代碼中,隨時引用。

 

6)工具樣式

工具樣式就是預先寫好對齊方法,margin的距離,padding的距離,display的展現方式等。

可以在分析了頁面后,大致的寫一些,不用寫太多,夠用即可。

 

三、頁面特性

1)CSS3動畫

為了讓頁面更生動,免不了加些動畫,產品很多時候也是需要你邊調試邊做效果。

雖然不用事先准備動畫代碼,但可以事先了解一些動畫效果,參考一些現有的開源動畫庫,例如“animate.css”。

將動畫代碼放在一塊兒,不然東一個西一個的,亂糟糟,自己也會忘記有哪些動畫效果,搞不好還會重復寫,改的時候也得到處找。

 

2)可復用部分

這次在做頁面的時候,低估了這些可復用部分,分析的太少,導致在寫的時候很多部分沒有抽象出來,代碼寫的很僵硬。

 

 

部分1

部分2 部分3 部分4

邊框修飾

有邊框

有底腳與陰影,上下有小眼睛

還有兩條彎曲的線

有邊框

底部有陰影

有邊框

有底腳與陰影

有邊框

底部有陰影

背景色

標題圖

寬高各不同

內部展示

兩列一行 三列一行 一列一行 三列一行

單元內容排列

 上下  上下 左右  上中下

單元內容

上部:背景圖+圖標+名字

下部:按鈕

上部:背景圖+圖標+名字

下部:按鈕

大背景圖

左邊:圖標+名字+描述+有效期

右邊:價格

上部:圖標

中部:名字

下部:價格

選中效果

 有(與部分2相同)  有  無  無

大致就是上表中的情況,接下來就是細調,比較麻煩的是位置擺放,各種對齊,寬高設置,margin、padding距離計算、字體大小顏色等。

做這些非常耗時,好在最麻煩的對齊、位置擺放可以使用彈性布局,不但拋棄了浮動,寬還能自適應,同一行內的子元素的高能自動計算為相同。

在自己的UI庫中也同樣封裝了彈性布局的,現在每個項目我都會引用進來。

 

源碼下載:

https://github.com/pwstrick/chezhu

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM