問(wèn)題描述

以前剛?cè)腴T(mén)前端的時(shí)候根本不會(huì)去糾結(jié)什么 能完美實(shí)現(xiàn)頁(yè)面就很好了~

隨著知識(shí)的增加與了解 逐漸考慮樣式的可復(fù)用性、擴(kuò)展性、命名的規(guī)范、目錄結(jié)構(gòu)組織等

導(dǎo)致到現(xiàn)在根本就不會(huì)寫(xiě) Css 了 一個(gè)簡(jiǎn)單的組件要思考好長(zhǎng)時(shí)間把所有情況都考慮全了 為了提升復(fù)用性把組件的樣式抽離到只剩下幾條 雖然好多是不用抽離的 不過(guò)考慮到的情況如果這個(gè)位置和組件默認(rèn)的不一樣的話就必須覆蓋定義之前的樣式 這樣等于多了一次不必要的渲染....

所以說(shuō) CSS 真的有完美的組織方式嗎 我是不是不適合寫(xiě)前端了 我還有救嗎？.....

問(wèn)題解答

這樣等于多了一次不必要的渲染....

這是你自己想當(dāng)然以為的吧，你以為瀏覽器就這么傻嗎？

它難道不會(huì)計(jì)算好最終樣式再進(jìn)行渲染嗎？

謝邀~~

哈哈 都是在坑里滾的 來(lái)回全身都是泥吖~~~

css 剛開(kāi)始寫(xiě)的時(shí)候 我也是 直接上 該到什么寫(xiě)什么 也不會(huì)考慮題主說(shuō)的可復(fù)用性、擴(kuò)展性、命名的規(guī)范、目錄結(jié)構(gòu)組織 這樣寫(xiě)下來(lái) 一個(gè)項(xiàng)目下來(lái) css簡(jiǎn)直龐大

慢慢的 發(fā)現(xiàn)很多問(wèn)題還是要考慮的

后來(lái)開(kāi)始想到 優(yōu)化圖片 考慮到css命名的規(guī)范 考慮到有些重復(fù)的樣式抽出來(lái) 考慮到復(fù)用

后來(lái)開(kāi)始用less、sass編寫(xiě)css 用css module 處理css 也用了gulp壓縮打包

可算是慢慢地在了解 也在一直優(yōu)化css樣式

坑還很大 得慢慢填

1、不要自己寫(xiě)組件。除非你這個(gè)頁(yè)面是寫(xiě)著玩的或者給新手普及用的。現(xiàn)在圈里那么多的組件和框架，盡管拿來(lái)用。2、然后你就會(huì)發(fā)現(xiàn)只需要覆蓋樣式就可以了。3、“多了幾次渲染”這種糾結(jié)的思想只應(yīng)該出現(xiàn)在重構(gòu)上，而不是第一次構(gòu)建上。你下筆之前先思索幾天什么都不干，你信不信項(xiàng)目經(jīng)理砍死你。當(dāng)然沒(méi)人規(guī)定你工期的話你隨便。所以不要有潔癖。4、讀了你全文，感覺(jué)就是由潔癖無(wú)誤了。放開(kāi)手腳寫(xiě)吧。當(dāng)然必要的文件夾架構(gòu)和組件拆分是需要研究一番的，一旦一個(gè)項(xiàng)目確定了這些就不要變，就算要改進(jìn)也是到下一個(gè)項(xiàng)目里改。否則你一年也搞不出個(gè)項(xiàng)目。

我們都懷念那種簡(jiǎn)單直接的方式，無(wú)奈前段工程化大潮勢(shì)不可擋，概念越來(lái)越多，代碼越來(lái)越臃腫，目錄結(jié)構(gòu)越來(lái)越復(fù)雜。webpack部署個(gè)前端環(huán)境麻煩死，md,架個(gè)服務(wù)器也不過(guò)如此。

webpack css module?

閉門(mén)造車(chē)不可取。去看看別人的組件怎么寫(xiě)的。 面對(duì)初學(xué)者，我一般推薦bootstrap庫(kù)，這個(gè)庫(kù)的css寫(xiě)的非常出色，仔細(xì)看看它的結(jié)構(gòu)是如何組織的。

只限于大項(xiàng)目，小項(xiàng)目整太多文件，很煩的。

大項(xiàng)目由于業(yè)務(wù)繁多，頁(yè)面更是無(wú)計(jì)其數(shù)，樣式文件的模塊化，組件化也是為了方便管理。通過(guò)文件名就可以定位到相應(yīng)要修改的地方。

便于項(xiàng)目管理的同時(shí)，也減少了協(xié)同開(kāi)發(fā)之間引起的沖突，因?yàn)槊總€(gè)人只是負(fù)責(zé)對(duì)應(yīng)項(xiàng)目的單一文件。

適度就好過(guò)猶不及。如果項(xiàng)目的確是因?yàn)槟愕腸ss需要優(yōu)化，那樣你再去優(yōu)化。盡可能的提升自己的水平。讓自己再自己的水平上做到最好。不要去盲目追求一些東西。知道自己想要的是什么

如果你會(huì)用預(yù)編譯工具的話，建議你看一下weui的源碼。

先做暫時(shí)能想到的，慢慢優(yōu)化唄