前端 - CSS 真的有復(fù)用性和擴(kuò)展性可言嗎?我感覺我已經(jīng)完全不會寫代碼了.....
問題描述
以前剛?cè)腴T前端的時候根本不會去糾結(jié)什么 能完美實(shí)現(xiàn)頁面就很好了~
隨著知識的增加與了解 逐漸考慮樣式的可復(fù)用性、擴(kuò)展性、命名的規(guī)范、目錄結(jié)構(gòu)組織等
導(dǎo)致到現(xiàn)在根本就不會寫 Css 了 一個簡單的組件要思考好長時間把所有情況都考慮全了 為了提升復(fù)用性把組件的樣式抽離到只剩下幾條 雖然好多是不用抽離的 不過考慮到的情況如果這個位置和組件默認(rèn)的不一樣的話就必須覆蓋定義之前的樣式 這樣等于多了一次不必要的渲染....
所以說 CSS 真的有完美的組織方式嗎 我是不是不適合寫前端了 我還有救嗎?.....
問題解答
回答1:這樣等于多了一次不必要的渲染....
這是你自己想當(dāng)然以為的吧,你以為瀏覽器就這么傻嗎?
它難道不會計(jì)算好最終樣式再進(jìn)行渲染嗎?
回答2:謝邀~~
哈哈 都是在坑里滾的 來回全身都是泥吖~~~
css 剛開始寫的時候 我也是 直接上 該到什么寫什么 也不會考慮題主說的可復(fù)用性、擴(kuò)展性、命名的規(guī)范、目錄結(jié)構(gòu)組織 這樣寫下來 一個項(xiàng)目下來 css簡直龐大
慢慢的 發(fā)現(xiàn)很多問題還是要考慮的
后來開始想到 優(yōu)化圖片 考慮到css命名的規(guī)范 考慮到有些重復(fù)的樣式抽出來 考慮到復(fù)用
后來開始用less、sass編寫css 用css module 處理css 也用了gulp壓縮打包
可算是慢慢地在了解 也在一直優(yōu)化css樣式
坑還很大 得慢慢填
回答3:1、不要自己寫組件。除非你這個頁面是寫著玩的或者給新手普及用的。現(xiàn)在圈里那么多的組件和框架,盡管拿來用。2、然后你就會發(fā)現(xiàn)只需要覆蓋樣式就可以了。3、“多了幾次渲染”這種糾結(jié)的思想只應(yīng)該出現(xiàn)在重構(gòu)上,而不是第一次構(gòu)建上。你下筆之前先思索幾天什么都不干,你信不信項(xiàng)目經(jīng)理砍死你。當(dāng)然沒人規(guī)定你工期的話你隨便。所以不要有潔癖。4、讀了你全文,感覺就是由潔癖無誤了。放開手腳寫吧。當(dāng)然必要的文件夾架構(gòu)和組件拆分是需要研究一番的,一旦一個項(xiàng)目確定了這些就不要變,就算要改進(jìn)也是到下一個項(xiàng)目里改。否則你一年也搞不出個項(xiàng)目。
回答4:我們都懷念那種簡單直接的方式,無奈前段工程化大潮勢不可擋,概念越來越多,代碼越來越臃腫,目錄結(jié)構(gòu)越來越復(fù)雜。webpack部署個前端環(huán)境麻煩死,md,架個服務(wù)器也不過如此。
回答5:webpack css module?
回答6:閉門造車不可取。去看看別人的組件怎么寫的。 面對初學(xué)者,我一般推薦bootstrap庫,這個庫的css寫的非常出色,仔細(xì)看看它的結(jié)構(gòu)是如何組織的。
回答7:只限于大項(xiàng)目,小項(xiàng)目整太多文件,很煩的。
大項(xiàng)目由于業(yè)務(wù)繁多,頁面更是無計(jì)其數(shù),樣式文件的模塊化,組件化也是為了方便管理。通過文件名就可以定位到相應(yīng)要修改的地方。
便于項(xiàng)目管理的同時,也減少了協(xié)同開發(fā)之間引起的沖突,因?yàn)槊總€人只是負(fù)責(zé)對應(yīng)項(xiàng)目的單一文件。
回答8:適度就好過猶不及。如果項(xiàng)目的確是因?yàn)槟愕腸ss需要優(yōu)化,那樣你再去優(yōu)化。盡可能的提升自己的水平。讓自己再自己的水平上做到最好。不要去盲目追求一些東西。知道自己想要的是什么
回答9:如果你會用預(yù)編譯工具的話,建議你看一下weui的源碼。
回答10:先做暫時能想到的,慢慢優(yōu)化唄
相關(guān)文章:
1. php - 請問大批量數(shù)據(jù)處理,如何分割?2. html5和Flash對抗是什么情況?3. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)4. javascript - vue過渡效果 css過渡 類名的先后順序5. css右浮動字的順序顛倒了6. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實(shí)在是找不到哪里的問題了。7. ios - 類似微博首頁,一張圖的時候是如何確定圖大小的?8. javascript - vuejs+elementui 購物車價(jià)格計(jì)算,點(diǎn)擊加減號修改數(shù)量總價(jià)都不會改變,但是計(jì)算執(zhí)行了9. javascript - 如何使用loadash對[object,object,object]形式的數(shù)組進(jìn)行比較10. javascript - 我是做web前端的,公司最近有一個項(xiàng)目關(guān)于數(shù)據(jù)統(tǒng)計(jì)的!
