1. 程式人生 > >欲練JS,必先攻CSS——前端修行之路

欲練JS,必先攻CSS——前端修行之路

詳細 ive 灰色 驗證碼 .com 告訴 target 核心 字體顏色

  今天我講的主題是css,具體聊一下我大概的css學習歷史,分享一些幹貨,希望這次分享對大家有所啟發和幫助。

個人的css歷史:

  說說自己的css學習的歷史,12年,當時是老師手把手1對1教我div+float的固定布局,所有元素全部用float,做了學生會網站的全部前端頁面,因為有段時間學PS比較多,也是自己做的UI,很醜,老師說第一次做成這樣很不錯了,那時老師就覺得我有做前端的天賦,我就是從這個時候開始接觸前端的。畢業設計自己一個人做了一個全棧的web,做完整個畢業設計後,我就決定出來要做前端,感覺自己更喜歡。14年出來工作,那時候還不會用什麽less,就是直接寫css,那時候主要還是寫固定布局的pc頁面,14年底自己在項目裏折騰,用了一下JQmobile,超級難用。15年做一個移動端項目的時候,調研了幾個css庫,學習了bootstrap和它部分源碼,還用到了webfont,使用流式布局這一次提升很大再後來學習了rem,並用到了項目中,至此我的css就到了一個緩慢成長期,或者說就沒有特意學習css了。

幹貨

下面來說一些,我平時比較註意的細節、技術點,和一些大家可能不是很熟悉的知識點。

1.box-sizing: border-box

  box-sizing主要有兩個值content-box和border-box,先看下官方的解釋:

技術分享

通俗一點來說,默認情況下,padding和border是會額外占據空間的,假如元素寬是10px,如果設置了1px border邊框,實際的寬就是12px,padding同理。那麽這樣會導致,布局的寬高不好控制,計算也特別麻煩。所以我們會給全局的元素用上border-box, 只要設置了寬高,那麽border和padding無論怎麽變化,元素的寬高都不會變,這樣方便布局和計算。

技術分享

2.左邊固定 右邊自適應

在布局的時候,比如一些列表頁,常常左邊是一個固定大小的縮略圖,右邊剩余部分展示標題,如圖

技術分享

那我們就叫左邊固定右邊自適應的布局吧,我的方法 100%寬的div用padding-left把左邊圖片的位置留出來,div元素內容的部分就是標題,圖片絕對定位到padding-left區域,這樣就實現了左固定右自適應,(前提是box-sizing必須是border-box,否則padding加上100%寬會超出屏幕寬度),大致代碼如下:

技術分享

3.偽類的 content attr

偽類before,after的content屬性,是用來插入內容的,我們可以通過attr 傳入一個當前元素的屬性名,把屬性值,載入進偽類內容,這個是一種寫法,但實際應用場景可能並不多,就當了解一下吧

技術分享

4.中文符號居中效果

對於動態輸出文字可以不用在意,某些頁面可能會有類似提示文案的地方,用英文標點符號,對於居中效果比較友好。

技術分享

5.元素的上下間距

布局的時候從上往下開始寫頁面,一般都是寫下一個的元素margin-top來決定和上一個元素的間距,那麽就盡量不要又是寫margin-top又是寫margin-bottom,如果混著用,後期不好維護,比如某一塊區域需要摞位置,或者是一個組件可能會被很多地方共用,混著寫的話後期在改的時候,可能會麻煩一點,這裏導致的問題可以說不痛不癢,但是不管是js還是css,註重細節並養成好的習慣,是代碼能力的一種體現。

技術分享

6.字體顏色透明

有時候設計師,在配置字體顏色的時候可能用透明的百分比,來設置幾種不同的顏色,比如主色是#000,淺灰色#000 80%的透明度,這種情況下不建議web寫透明度,而是讓設計師給到對應的顏色值,因為透明色會根據背景的不同,比如現在看到的這種情況,這樣擴展性就比較差。

技術分享

技術分享

7.命名

命名是一個讓人最糾結的事情,先看第一種,這樣命名的更詳細可以一目了然的知道當前類的意思,但是長度比較長,增加代碼量。

技術分享

第二種使用縮略命名,會使代碼更短,寫起來更快,但是不易讀。

技術分享

如果用縮略命名,可以約定文檔,有約定和熟悉成本,但是熟悉以後更高效,類的命名也會變得更規範和統一
技術分享

8. 0.5px邊框的理解誤區

我之前寫邊框的時候就發現,只要讓邊框的顏色更淡,邊框看起來就更細,所以當設計師問我為什麽邊框看起來比較粗的時候,我都告訴他們顏色調淺一點就好了,這個技巧我一直在實際使用。網上有博客說通過css3 transform的縮放scale 50%,可以實現0.5px邊框,我一直很奇怪,1px實際是物理的最小單位,怎麽可能實現0.5px,就這樣我做了個實驗,我設置了1px顏色為000的邊框(黑色),如圖,

技術分享

當我使用scale縮放50%的時候,顏色變成了c5c5c5,但是實際仍然有1px。如圖,

技術分享

我用的是拾色工具會精確到像素,確實還是1px,所以這種方式並不能實現0.5px而是顏色變淺了。還有些手機屏幕上1px是按照2px來的展示,所以這種方式可以讓2px縮放為1px,讓1px的邊框變得更淡,這種方式確實能讓邊框變細,但不能說是0.5px。

9.user-select:none

該屬性讓區域內容無法被選中,可以阻止用戶長按復制,也可以避免用戶復制無關內容,比如下面我只希望用戶復制6655驗證碼,除了6655我都設置了user-select:none,長按其他部分並不會出現復制按鈕,按鈕數字就可以,並且第三幅圖的左右下標只能在6655間拖動

技術分享

10.js-class

在為dom綁定事件的時候,大家可能會直接綁定當前有樣式的class,這樣會因為修改或者替換class名稱,影響JS,而如果定義一個無樣式的js前綴的類 專門用來綁定事件,這樣就解除了樣式和邏輯的耦合,在讀代碼的時候,也能一下子看出哪些元素綁定了事件的。

技術分享

11.公共類組合寫法

  好吧,這是我自己命名的,我們先看下第一種寫法,這很常規,所有樣式寫在一個class裏

技術分享

再看下第二種,定義一個公共類,通過less在樣式裏直接引入這個類,第二種效率會高一點(少寫幾個字母),但是需要熟悉和維護公共類

技術分享

再看第三種,把公共類寫在元素的class裏,這一種比較靈活,比如我現在要寫兩個item的元素,一個左浮動,一個右浮動,那麽這種就能不改動item,而直接使用不同的類實現不同的樣式,就像JS的代碼去重一樣,傳入一個不同的參數進行區分,一樣的地方共用。

技術分享

第四種公共類全部寫在元素裏, 在寫dom的時候都不用去寫css了,直接把想要的類寫進dom,是不是有點像JS裏的組件化,這種寫法在特定情況下比較高效,比如PC後臺類項目,對UI要求不高,就比較適合,這個高效也取決於公共class類是否全面,對項目中的class是否熟悉,但是也要註意不要讓元素的長度太長,盡量保持在4個類以內,超出的話就不應該用這種寫法。

技術分享


這四種寫法其實都可以,在一個項目中,針對不同的部分都可以用不同的寫法,可以非常靈活的選擇想要的方式。

12.rem布局的文字大小

大家都知道瀏覽器一般不會讓文字小於12px,如果設置小於12px瀏覽器都會顯示12px, 我們在用到rem布局的時候,元素是會根據屏幕寬度等比例縮放的,比如設計師給到750px的設計稿,如果某一個元素文字是22px,那麽當用戶的屏幕寬度是375的時候,文字會縮放為11px,實際瀏覽器就會顯示為最小12像素,那麽其他非字體元素比例仍然會縮小,這個時候字體可能和其他元素的比例就不是原設計稿的比例了,如果用戶屏幕是320px,那麽和原設計稿元素間的比例就差更多了。所以我們一定要根據自己的情況告訴設計師,在寬是750像素的設計稿裏,字體最小應該是多少像素。

技術分享

13.object-fit: cover

我們在做列表頁的時候,圖片都是固定的大小,比如是一個100px*100px的正方形圖片,但是很有可能拿到的圖片並不是正方形的,這個非正方形圖片放到正方形的img標簽裏,就會變形如果使用object-fit:cover 可以裁剪超出比例的部分,這樣圖片看起來就不會是變形或者拉伸的了,但是這樣會導致圖片殘缺,根據圖片的不同,可能裁剪掉關鍵部分的內容,但是鑒於列表本來就是縮略圖,所以還是可以加上這個屬性的,是一個比較折中的辦法。

技術分享

14.圖片的約定

說到圖片拉伸的問題, 就要說說對於圖片的約定,因為不管是拉伸還是裁剪都會導致圖片的殘疾,拉伸影響視覺,裁剪害怕關鍵部位丟失,如果不嚴格按照約定的規範來,肯定是不能兼容所有情況的,因此在做項目的一開始就要和產品運營們約定好圖片比例,建議約定為正方形。

小結

總得來說,學好css,需要長期推敲,長期註重和完善代碼的細節,在每一次項目實戰中,抽出一點點時間優化、嘗試,日積月累成為個人的體系,
個人的風格。這種體系和風格,一般來說你自己都習慣了,會習以為常,甚至總結的時候都不知道應該說什麽,但是當你去維護或者看別人的代碼的時候,你就能體會出,
原來這個地方別人可能會這樣用,你提出自己的見解,就能對團隊和周圍的同事產生好的影響,如果自己的有問題同事指出來,也可以反過來,提升自己的認識。

和設計師。。。

要做好css,寫好頁面,和設計師的溝通也是很重要的一個技能,因為設計師決定頁面最終要呈現的樣子,要通過項目驗收,也必須要設計師驗收通過才行。

情景1:
設計師給過來一個交互效果,前端拿到,一想交互效果還可以,但是實現成本比較高,功能都做不完,不想做這麽細,然後就直接說沒時間這個做不了,設計師一想這個交互很難嗎,別人都能做,你為什麽不做,就這樣來回幾句就鬧矛盾了,鬧到產品那裏去了,最後可能交互效果還得做,時間也耽誤了。其實這個是很多前端會遇到的問題,時間壓得緊,功能可能都要延期,還來做這些交互,自然會有點抱怨,情緒一上來,把產品和設計都得罪了,最後還是要做,久而久之矛盾越來越深,溝通就越來越困難。 換個思路想問題,設計師大部分時候時間也很緊,要對產品和設計領導有所交代,前端又在催,好不容易做出來了,你這也不能實現那也不能實現,你這樣我也沒法交代啊。那麽我們換個溝通方式,比如這樣說:我們這邊時間確實有點緊,這個交互比較麻煩,比較費時間,我做是可以做,只是可能會影響項目進度,你看要不我先做簡單點,等到提測的時候有時間再加上這個交互,實在不行能不能等到上線之後,我單獨再優化一下這個地方,很快就能上線。

  設計師們還是講道理的,根據web上的一些特性,設計師設計出來的一些樣式一些想法或許沒法實現,又或者實現成本太高,我們就得說服他們這個地方為什麽不能實現,因為他們不懂,所以害怕你忽悠他們(實際有時候就有人忽悠他們),所以要想說服別人,自己一定要把問題搞清楚,把知識點理清楚,不能實現的理由對設計師說清楚,並且要有理有據,同時最好網上找到相關博客或者官方解釋進行佐證。有很多矛盾和問題,就在於我們疏忽了溝通,又或者說是我們自己偷懶了,其實當自己把知識點能給外行說清楚了,這也說明是理解透了,也是對自己能力的提升。設計師辛苦設計的稿子一定要盡量達到他們的效果,也要考慮擴展性和可實現性,態度很重要,不要讓人覺得是在敷衍他們,什麽是敷衍,不解釋清楚就說不做,就是敷衍,否則碰一鼻子灰只有怪自己。技術點要搞清楚,要不解釋不清楚,別人不買單,在發現設計稿有問題的時候,耐心提醒其中一些不合適的地方,多幫別人承擔一點,前端和設計師要友好相處

再隨便聊聊

不要兼容IE低版本(我覺得兼容11以上就行了),特別是創業公司,對創業公司來說,性價比極低,本身創業公司沒技術、沒沈澱、活下去都是一個問題,兼容IE就是甚至浪費人力成本,比如說IE8不支持圓角,得用圖片代替,
沒有placeholder,得用JS來模擬。對於個人來說,技術的更新換代是大勢所趨,我們要往前看,有的是東西給你學,不要在這個地方浪費青春。

有空大家都去看看bootstrap源碼,看一些核心的部分就夠了,比如變量variable等一些最常用的部分,源碼其實不難,能得到很多啟發。

技術分享

最後附上直播地址

欲練JS,必先攻CSS——前端修行之路