前端 - CSS 真的有复用性和扩展性可言吗？我感觉我已经完全不会写代码了.....

Question

以前刚入门前端的时候根本不会去纠结什么 能完美实现页面就很好了~

随着知识的增加与了解 逐渐考虑样式的可复用性、扩展性、命名的规范、目录结构组织等

导致到现在根本就不会写 Css 了 一个简单的组件要思考好长时间把所有情况都考虑全了 为了提升复用性把组件的样式抽离到只剩下几条 虽然好多是不用抽离的 不过考虑到的情况如果这个位置和组件默认的不一样的话就必须覆盖定义之前的样式 这样等于多了一次不必要的渲染....

所以说 CSS 真的有完美的组织方式吗 我是不是不适合写前端了 我还有救吗？.....

Answer 1

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

這是你自己想當然以為的吧，你以為瀏覽器就這麼傻嗎？

它不會計算好最終樣式再進行渲染嗎？

Answer 2

謝邀~~

哈哈 都是在坑裡滾的 來回全身都是泥吖~~~

css 剛開始寫的時候 我也是 直接上 該到什麼寫什麼 也不會考慮題主說的可复用性、扩展性、命名的规范、目录结构组织 這樣寫下來 一個項目下來 css簡直龐大

慢慢的 發現很多問題還是要考慮的

後來開始想到 最佳化圖片 考慮到css命名的規範 考慮到有些重複的樣式抽出來 考慮到重複使用

後來開始用less、sass寫css 用css module 處理css 也用了gulp壓縮打包

可算是慢慢地在了解 也在一直優化css樣式

坑還很大 得慢慢填

Answer 3

1.不要自己寫組件。除非你這個頁面是寫著玩的或是給新手普及用的。現在圈裡那麼多的組件和框架，儘管拿來用。
2、然後你會發現只要覆蓋樣式就可以了。
3、「多了幾次渲染」這種糾結的想法只應該出現在重構上，而不是第一次建構上。你下筆之前先思索幾天什麼都不干，你信不信專案經理砍死你。當然沒人規定你工期的話你隨便。所以不要有潔癖。
4、讀了你全文，感覺就是由潔癖無誤了。放開手腳寫吧。當然必要的資料夾架構和元件拆分是需要研究一番的，一旦一個專案確定了這些就不要變，就算要改進也是到下一個專案裡改。否則你一年也搞不出個專案。

Answer 4

我們都懷念那種簡單直接的方式，無奈前段工程化大潮勢不可擋，概念越來越多，程式碼越來越臃腫，目錄結構越來越複雜。 webpack部署個前端環境麻煩死，md,架個伺服器也不過如此。

Answer 5

webpack css 模組？

Answer 6

閉門造車不可取。去看看別人的組件怎麼寫的。
面對初學者，我一般推薦bootstrap庫，這個庫的css寫的非常出色，仔細看看它的結構是如何組織的。

Answer 7

只限於大項目，小項目整太多文件，很煩的。

大項目由於業務繁多，頁面更是無計其數，樣式文件的模組化，組件化也是為了方便管理。透過檔案名稱就可以定位到對應要修改的地方。

便於專案管理的同時，也減少了協同開發之間引起的衝突，因為每個人只是負責對應專案的單一文件。

Answer 8

適度就好過猶不及。如果專案的確是因為你的css需要優化，這樣你再去優化。盡可能的提升自己的水平。讓自己再自己的水平做到最好。不要去盲目追求一些東西。知道自己想要的是什麼

Answer 9

如果你會用預編譯工具的話，建議你看一下weui的源碼。

Answer 10

先做暫時能想到的，慢慢優化唄