可能礙於時間或種種其他原因
專案進行最常發生的就是
Code 越寫越多 ( 這不是廢話嗎 = = )
Code 越寫越多 ( 這不是廢話嗎 = = )
咳~ 咳~
其實我指的是越寫越爛 ！！
其實我指的是越寫越爛 ！！
首先在一個風和日麗的早上
工程屍打開了專案系統
發現要完成一個新項目
努力趕工後終於完成了
之後便進行下個項目
但好景不長
主管在確認後決定在舊項目上再增加或修改新功能
就增加個差件
因為覺得改動不大或已經將功能釋出
所以需要快速改完
因此你又回到舊的工作項目
但這時候發生了個問題
新的項目已經開始開發
網頁與 CSS 還沒 CHECK IN 進 SVN
你就從目前的版本繼續修改舊項目
亦或是新項目在目前 HTML 架構下根本不適合
亦或是新項目在目前 HTML 架構下根本不適合
只好用很多奇怪的方法或大量的 CSS 來完成功能
最後雖然完成了
但這些新程式半新不舊
或 HTML 架構與 CSS 根本就是錯的
只是外表看起來對而已
ex: 最常見的就是換一個外部容器寬度就全錯亂
這下 CSS 檔充斥了許多垃圾
長久下來便無法維護
只是外表看起來對而已
ex: 最常見的就是換一個外部容器寬度就全錯亂
這下 CSS 檔充斥了許多垃圾
長久下來便無法維護
要修也不知道從何開始修
不如重寫來的快
=============== 我是 css structure 甘巴茶 分隔線 ===============
有鑑於此
我一直覺得把樣式寫得漂亮不如撰寫一個可維護的 CSS 來的重要
相信各位 CSS 大神們也有自己一套作法
下面分享的是我在撰寫時的作法 希望可以提出來與大家討論
也不一定這就是最佳解因為
我將 CSS 依功能和順序分成以下四個部分
=============== 我是 css structure 甘巴茶 分隔線 ===============
有鑑於此
我一直覺得把樣式寫得漂亮不如撰寫一個可維護的 CSS 來的重要
相信各位 CSS 大神們也有自己一套作法
下面分享的是我在撰寫時的作法 希望可以提出來與大家討論
也不一定這就是最佳解因為
CSS 的寫法只有適不適合沒有正不正確
我將 CSS 依功能和順序分成以下四個部分
- Body 與 HTML 標籤的 Normalize
- 網站架構
- 共通樣式
- 其他樣式部分
但這是為甚麼這樣分呢？
CSS 撰寫說白了就是一個你蓋住我，我蓋住你的過程
畢竟它不是程式 沒有 If Than Else
為了能夠方便維護
撰寫原則是上面樣式可以在下面被覆蓋
也因此 撰寫順序 與 選擇器使用 便極為重要
( 不懂的話可以看這篇 ABC 狗咬豬，CSS 也有 ABCD )
只要確定了大原則
之後便不容易多寫不必要的屬性 ( 這就是寫錯啦 >< )
因為樣式有問題通常都是
除了一開始作 標籤的 Normalize 較單純外沒甚麼問題外
style.css 上半部皆為網站主體架構
它定義了架構的欄寬、位置、邊距等等屬性
再來是通用模組樣式
基本上每個模組都該是一個 區塊 ( 我稱作 box )
而這些 box 也該有共通的樣式
這就是一個通用模組
只要定好後就可以在各個頁面輕鬆使用
為了簡化工程師的開發
會有很多種通用模組可供調用
( ex: grid, list ... etc )
然而架構訂好了、通用樣式也訂好了
但不可能每頁都長一樣吧
可能還會有一些只屬於特定頁面的樣式
像在首頁要多一個選單 樣式是怎樣怎樣....
可能在分類頁面要怎樣怎樣...
這些便寫在最後面的部分
這邊要提一下樣式命名原則
我覺得命名才是 CSS 最難的部分
因為到底該由樣式的功能或是目的來取名
會跟容不容易作樣式覆蓋有關
這種要有點黏又不能太黏 ( 這之中的醍醐味只能靠實作來感受了 )
主體架構比較沒有命名問題
通用模組一般習慣依照樣子來命名
例如圖中所示的 ex: box, grid, list ... 等等 ( 越短越好 命名就是一切從簡啊 !! )
grid 和 list 裡面還會有子項目
這時會都用 item 作為樣式名稱 ( 為甚麼不換一個呢，因為再怎麼換都不夠用，乾脆一樣 )
也因此 item 就變成一個保留字
這在之後開發需要注意不要衝名
而最後的 其他樣式部分 因為跟每個頁面的功能有關
因此定名時會利用功能來定
像是 tag, player ... etc
之後要找比較簡單
這種將 CSS 依功能分開的寫法有幾個好處
當然只按照這樣來寫是不夠的
之後會依照各個部份來講解細部的撰寫原則
怎樣的寫法能夠讓 CSS 有條不紊的開發
而不會造成維護的困擾
當然這是摸索出來的結果
可能不適合你或者有更好的想法也都歡迎提出討論
=============== 我是 CSS structure Successful Mission 分隔線 ===============
余致力於網頁撰寫沒幾年
CSS 撰寫說白了就是一個你蓋住我，我蓋住你的過程
畢竟它不是程式 沒有 If Than Else
為了能夠方便維護
撰寫原則是上面樣式可以在下面被覆蓋
也因此 撰寫順序 與 選擇器使用 便極為重要
( 不懂的話可以看這篇 ABC 狗咬豬，CSS 也有 ABCD )
只要確定了大原則
之後便不容易多寫不必要的屬性 ( 這就是寫錯啦 >< )
因為樣式有問題通常都是
為了某個模組寫了太多不該屬於它的屬性
導致後面又寫了一堆屬性來覆蓋的無限循環=============== 我是以下是正題分隔線 ===============
除了一開始作 標籤的 Normalize 較單純外沒甚麼問題外
style.css 上半部皆為網站主體架構
它定義了架構的欄寬、位置、邊距等等屬性
再來是通用模組樣式
基本上每個模組都該是一個 區塊 ( 我稱作 box )
而這些 box 也該有共通的樣式
這就是一個通用模組
只要定好後就可以在各個頁面輕鬆使用
為了簡化工程師的開發
會有很多種通用模組可供調用
( ex: grid, list ... etc )
然而架構訂好了、通用樣式也訂好了
但不可能每頁都長一樣吧
可能還會有一些只屬於特定頁面的樣式
像在首頁要多一個選單 樣式是怎樣怎樣....
可能在分類頁面要怎樣怎樣...
這些便寫在最後面的部分
這邊要提一下樣式命名原則
我覺得命名才是 CSS 最難的部分
因為到底該由樣式的功能或是目的來取名
會跟容不容易作樣式覆蓋有關
這種要有點黏又不能太黏 ( 這之中的醍醐味只能靠實作來感受了 )
主體架構比較沒有命名問題
通用模組一般習慣依照樣子來命名
例如圖中所示的 ex: box, grid, list ... 等等 ( 越短越好 命名就是一切從簡啊 !! )
grid 和 list 裡面還會有子項目
這時會都用 item 作為樣式名稱 ( 為甚麼不換一個呢，因為再怎麼換都不夠用，乾脆一樣 )
也因此 item 就變成一個保留字
這在之後開發需要注意不要衝名
而最後的 其他樣式部分 因為跟每個頁面的功能有關
因此定名時會利用功能來定
像是 tag, player ... etc
之後要找比較簡單
這種將 CSS 依功能分開的寫法有幾個好處
- 較容易針對特定模組做調整，而不會影響到其他頁面的樣式
- 砍掉如果模組廢棄掉要砍掉較容易
- 開發上不容易因調整樣式時改動到其他頁面的樣式
- 如果未來有時間把之前寫的爛 CODE 修好，也比較好改樣式
- ...( 等你來發現囉 )
當然只按照這樣來寫是不夠的
之後會依照各個部份來講解細部的撰寫原則
怎樣的寫法能夠讓 CSS 有條不紊的開發
而不會造成維護的困擾
當然這是摸索出來的結果
可能不適合你或者有更好的想法也都歡迎提出討論
=============== 我是 CSS structure Successful Mission 分隔線 ===============
余致力於網頁撰寫沒幾年
其目的在求程式與樣式開發流程之流暢
積沒幾年之經驗
深知欲達到此目的
深知欲達到此目的
必須喚起眾工程及美工之能者賢人，共同奮鬥以上大噓
感謝大家看完這篇 哇靠文
作為工程及美工之間的橋接
兩方工作越來越深入 越覺撰寫困難
難的不是怎樣將樣式寫得漂亮
而是怎養把架構寫得漂亮
過去 CSS 的目的是希望統一與簡化樣式撰寫
但常常網站寫完了程式就拋棄了
但 CSS 不是寫來拋棄的
按照一定的規則和規範 能相容於各個系統
才是現代優秀的 CSS 撰寫方法
感謝大家看完這篇 哇靠文
作為工程及美工之間的橋接
兩方工作越來越深入 越覺撰寫困難
難的不是怎樣將樣式寫得漂亮
而是怎養把架構寫得漂亮
過去 CSS 的目的是希望統一與簡化樣式撰寫
但常常網站寫完了程式就拋棄了
但 CSS 不是寫來拋棄的
按照一定的規則和規範 能相容於各個系統
才是現代優秀的 CSS 撰寫方法
沒有留言:
張貼留言