前端崗位目前確實十分火熱,但是就業壓力也很大;前一段時間與大學同學交談,他向我哭訴說去一個機構學習了前端工程師,我心底里為他高興,因為他馬上就可以月薪突破10K了,可是不幸的是他說去北京面試一個月,還是沒有找到滿意的工作,這里想提醒想進入前端工程師的你,也考慮報班的話,那么你可以先自己去看看網上的一些視頻課程,看看你自己能否看懂?還有想想自己在開發道路中能否堅持下來?能否喜愛與電腦、各大瀏覽器、還有鍵盤等打交道。
如果你決定了,那么請先放棄能否找到工作?先學習好知識,才是王道;因為其實在用人單位,看的是你的態度和能力,並不去深究你的能力來自哪里?如何來的?前端工作知識體系非常龐大,而且更新非常快。但是這些都可以自己慢慢去積累,“只要你有恆心,毅力,你可以去攀登這個高峰”;培訓班的課程是4個半月到5個月,但是你或許沒有看到這里的學員每一天都是敲代碼到凌晨2點,第二天早上8點依舊會起床,也會去整理自己的學習筆記,做自己的項目,但是一個好老師很重要,其實,最重要的是你自己想做什么?有沒有目標?你的執行力如何?
前端中有三大板塊,一個是布局html,一個是樣式表stylesheet,一個是JavaScript;或許是由於工作原因,我現在對於前端有了新的看法,新的領悟吧。前端最牛逼的地方到底是什么呢?我發現最牛逼的是前端的數據表現能力,前端的交互形式。
不知道大家現在對於淘寶APP有沒有感覺到變化,它現在已經變得非常人工智能了,只要你今天瀏覽一個商品,淘寶APP就會在首頁或者消息推送中去引導你去消費,或許你會覺得這跟前端沒有關系,那么我只能說你還是一個小白階段,或者說你只有編碼能力;如果這里問你:如何實現一個系統或者網站根據不同的用戶展現不同的商品,你如何去實現呢?
這里回歸本文的主題,前端css寶典的秘籍
推薦一很好的前端bootstrap的框架AdminLTE,這里推薦大家去學習它的樣式表,還有一些布局,下面我講從我的個人工作習慣變化去闡述如何快速增強自己的css能力
1.最常見的是內聯樣式和外鏈樣式混用
1 <p class="red" style="position:relative"> 2 <h1 class="h1">我會css</h1> 3 </P>
這里首先從一個類名開始,一般初級工程師,都會隨意命令ClassName,這是最為致命的,因為你可能定義了很多類,但是你並不清楚自己的類的意義和效果,自己調用還可以,但是項目中,無法出手的,會被人所唾棄的。
第二點:這里引用了外部的樣式,而用了內部的樣式,大家做過項目的都會明白為什么會再項目開始的時候,統一類名的要求,嚴格的項目甚至會規定注釋的model,其實內部引用的樣式只是后期不好優化,不是很方便去修改樣式,如果一個頁面上千行去這樣寫,從代碼的可讀性來說不是很高,同時,大家都知道瀏覽器去讀取(解析)我們的HTML的結構是s從第一行開始去解析的,外部引用的樣式也會去請求我們的服務器,去解析我們的css並且轉化為demo tree,在轉化為tree construction,再render tree 最后 painting the render tree ,推薦去看看這個博客深入解析瀏覽器的工作原理
第二種 類名過長,嵌套太多
1 .tree .tree-ul .tree-ul-li .tree-bottom a:hover span{ 2 color:#ccc; 3 }
這個例子還不是很長的,推薦的那個框架有一個膚色的樣式,你看了就會發現,確實很長,有的甚至類名長達幾行。
大家很多人很喜歡用less去編寫 css,因為它確實很方便,而且還可以去定義一些函數,類等方便我們去修改一些樣式,但是如果你用的不合理,反而會造成頁面的一些缺陷,就是css類層級太深,不利於優化,也不利於讀取,再渲染的時候,時間會花大量的時間;很長的類名不易於瀏覽區去讀取,望大家合理使用;
第三種 項目中如何去修改類
其實我們的樣式表設計可以分為初始化的樣式,交互時的樣式設計,交互后的樣式設計,以前初出茅廬,我從來沒有這樣考慮過,或許這就是實戰項目帶來的益處吧,如果你這么去設計一個頁面的樣式,那么你可能會出一個初始化樣式的類的大集合,甚至你們項目中會定義一些通用的類名,以便於大家開發。同時這里提醒大家不要再一個項目中去修改你不是清楚樣式類的設計而需要修改樣式,建議大家去重新編寫自己的類,然后去修改它。
因為,你要考慮到將來產品升級的時候,你怎么快速去修改樣式,修改產品,而不影響其他的模塊,甚至或者修改的時候,只是腳本需要變化,類延用就可以了。
第四 css晉升階段
利用偽類實現一些角標或者不重要的圖標,這是很多大牛與初級工程師的差別,很多初級工程師,遇到小的三角形或者其他的圖標都會做一個png圖片或者精靈圖去實現自己的功能,有的甚至是一個頁面多次去引用精靈圖,沒有合並,優化的人員會感覺非常惡心,是浪費加載時間,或許你覺得沒事,那是因為你沒有經歷過大項目,一個網頁要是延時多幾毫秒可能已經喪失了幾十萬用戶了。
還有前端的樣式表層出不窮,要多注意數據的表現形式,如何實現優雅的表現,同時吸引用戶的眼球,自己的類使用方便,而且便於管理,各大瀏覽器都兼容。這里提醒大家如果你遇到樣式的問題,那么不要解決了就說再見了,你要搞明白為什么這樣寫就是可以呢?為什么這個屬性一修改就不對呢?記住多去研究標准。這樣自己才能不斷提高。