在撰寫CSS樣式時，我們會用來當區塊的組件，會給他一個id名作為識別，一方面利用id的unique特性，使我們維護上能更快速的找到這個區塊，一方面是可以增加這個區塊的具體值，讓其他的css不會相互影響到。其他在id區塊裡面的或是分散在各個頁面的，我們就用class來命名，在id區塊裡我們會常用到content、article…等的class；分散在各個頁面的則像是pager等等。

 

• id是用#開頭，class是用.開頭。
• 命名最重要的是要以HTML的結構語義去命名，而不是以呈現出來的外觀樣式去命名。
• 名字避免使用外觀、顏色、大小、左右等任何涉及外觀描述的文字，像〝class=”blue_txt”〞、〝id=”red_font”〞或〝class=”txt1”〞，這樣以後維護時要改成其他顏色會變成樣式名稱與樣式不符的情況，會對以後維護的人造成困擾。
• 命名都是小寫。有一些瀏覽器會有字體大小寫問題，所以統一用小寫。
• 我們建議採用複合式命名，這樣可以避免名稱衝突。複合式命名用破折號( – )串接，複合式命名範例：channel-nav、member-bar、search-bar。
• 一個區塊內可以有好幾個class，2個以上的class只要用空白區隔開來即可，這常運用在同一頁面有很多類似的區塊。

雖然我們是用來做區塊的組件，但並非所有的區塊組件，都一定得要用來做區塊組件，而是要充份利用符合HTML語義的標籤，來讓CSS可以運用，例如：caption、fieldset、blockquote、ins、del、h1~6、p…等。