Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

CSS設計規範[2]-區塊命名

在撰寫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…等。

Leave a Reply

*