css檔案組織方式(2016 10)

2021-07-24 00:13:50 字數 1113 閱讀 9018

以前用css都是乙個檔案解決所有,在乙個頁面上寫下所有的css,後來才知道這樣是不對的。css體積大會導致網頁載入速度慢,**冗餘不說,後期維護也麻煩。於是,開始又了模組化思想,然後刻意地把公共部分提取出來,一方面解耦,一方面提高重用度。想是這麼想的,操作起來就沒這麼順利了!一來是還是不知道css檔案如何組織,另一方面總是不能很好地提取公共部分,又擔心這會導致html標籤類的臃腫。糾結中又結識了boostrap,知道了less這種東西,於是又不好下手了,導致現在舉棋不定,顧前怕後,無法前行…感覺自己陷到css坑里了…

看了一些大牛的css檔案組織方式以及一些css框架,但我認為比較合理的都是2023年左右的解決方案,比如張鑫旭部落格裡的css框架、網易nec解決方案等等。而現在漸漸地都在用less或者sass了,不過我還沒用過,只在bs裡用less改過一些東西。一開始打算用網易的nec的,但是實際操作起來感覺並不需要那麼複雜,好像乙個頁面對應乙個css檔案,把公共部分另外放在乙個css就夠了。我覺得這主要還是因為我寫的**不大,也就十幾二十個頁面而已,還有就是練得太少,沒有經驗。就如張鑫旭所說:

就css檔案而言

有的**分為header.css, body.css, footer.css,不做評價;

有的分為reset.css, main.css, content.css,不做評價;

有的分為common.css,然後每個種類的頁面乙個css,例如home.css(主頁), album.css(相簿頁面),message.css(站內信頁面),blog.css(日誌頁面)等,不做評價;

還有的直接將css嵌在頁面中,而非外部鏈結呼叫,不做評價。

這些不同的處理方法,沒有什麼正確與錯誤之分,只有適合不適合。每種方法都有其存在的道理,所以我是沒有資格做任何評價的。

像我現在寫的**一般也就十幾個頁面,如果還駕馭不了那種優秀的檔案組織方式,慢慢來好了。暫時還是用傳統的乙個global.css+每個頁面乙個css那樣吧,起碼不糾結了。相信練得多了,就會出感覺,更好的組織檔案。進一步的再把通用元件封裝起來,像bs那樣(導航欄,麵包屑,標籤),單獨放在乙個css中。再進一步的研究bs原始碼。看bs這樣乙個優秀的框架是如何組織檔案的。當然這都是後話了。暫時按簡單粗暴的傳統css檔案組織方式來,然後進入js階段。別想太多…

CSS檔案和JS檔案組織

在開發的時候會使用到多個css檔案和js檔案,如何組織就成了乙個問題。個人認為在開發的時候使用多個檔案,這樣方便檢視,到發布的時候再用工作合併成乙個。大概思路如下 一般包括兩個檔案,乙個在開發的時候使用,乙個在發布的時候使用,程式根據配置載入其中乙個。例如有乙個all debug.css檔案,在開發...

python檔案組織

shutil.copyfileobj src,dst,length 10 將src檔案裡的內容copy到dst裡,length是每次讀的位元組數。shutil.copy source,destination 複製檔案。該函式將返回乙個字串,該字串表示複製後的檔案路徑 shutil.copytree ...

程式的多檔案組織

ifndef j h included define j h included class void setb double y void setc double z double geta void 置三邊的值,注意要能成三角形 double getb void double getc void ...