iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

30天前端網頁技術超入門介紹系列 第 7

Day7. CSS 設計模式(三) - 命名基本

  • 分享至 

  • xImage
  •  

取個好名字一直都不容易,每當有個新同事要進來時,還沒看到人先聽到名字總是會猜想外表呢~
名字說不定也算是第一印象的一種?

不過 CSS 的命名就不是這麼難的事情了,只要有幾個大方向即可。

首先先介紹寫法吧,同樣是命名中的一環。

因為 CSS 名字是顯示在螢幕上的,不同於人名是用聽見的。所以名字怎麼呈現也算取名的技巧之一。

駝峰式寫法

分為大駝峰小駝峰
差異在於,
大駝峰為首字大寫,e.g. MyName
小駝峰為首字小寫,e.g. myName

筆者喜歡用小駝峰,沒什麼原因,主要就是習慣吧...

有人可能會有疑問,為什麼不用 -_ 符號呢?

主要是因為在開發網頁時並不會只有一個區塊。一個大區塊中也會包含著小區塊。

我會用 - 或 _ 來表示大區塊下的其他東西。

<div class="box">
    <p class="box-content">小區塊</p>
</div>
<div class="boxTwo"></div>

不過 CSS-Guidelines 的作者命名方式就是用 - 符號。

至於哪個比較好,習慣就好,根本沒差,一致都用同個方法比較重要。

知道名字寫法,那該如何取名字呢?

有兩個方式,自己考慮如何使用,最主要是用在何處。

語意化命名

優點在於專屬直覺易於維護

當你看到 .bookCase.news 時應該就能猜到這是個書櫃消息的 class 吧@@!

他提供你專屬於這個區塊的專用 class,也讓你在未來維護時提供你直覺、清晰的想法,不須回憶這個到底是啥。

當然依照 class 的特性,class 當然能重複使用,但這樣就失去語意化的優勢了。總不會命名 bookCase 然後放在 videoCabinet 的區塊吧...

語意化命名的缺點就如上面所述,過於專屬了,明明同性質的東西,卻不能重複使用。

所以就跑出第二個方式

非語意化命名(抽象命名)

這個不是正式的名字,只是我稱呼這種命名方式為抽象命名而已,比較好記@@

這個方法改善了語意化命名的缺點,但同時因為是抽象的方式,所以在命名時比較不直覺,且在開發前就需要先規劃好網頁的架構,規劃好後才比較好進行這類的命名方式。

簡單來說,像上面舉例的 .bookCase.videoCabinet,兩者在開發上結構類似的話,就能用 .list 來取代。

常用來舉例的顏色,也可以用 primary、other 或 another 來命名,減少使用直觀的 red、blue。


註:上面有提到,"在開發前就需要先規劃好網頁的架構"。這有點像在打草稿,在開發中才不會突然新增其他東西。


https://ithelp.ithome.com.tw/upload/images/20200914/20119051XBh03YyJsa.png
明天則是 BEM 的設計模式教學,可能有人會好奇應該跟前幾章的 SMACSS 或 OOCSS 連接再一起才是阿?這樣根本破壞結構!!
因為我習慣將大區塊底下的小區塊用 - 符號區分,但是沒介紹過我的命名方式又用直接講 BEM 的架構分類又很奇怪,所以就中間先插入這章了。原來一開始順序就錯了
上面廢話一堆,盡請期待明天的教學吧! 掰~


上一篇
Day6. CSS 設計模式(二) - OOCSS
下一篇
Day8. CSS 設計模式(四) - BEM
系列文
30天前端網頁技術超入門介紹30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言