分類彙整:CSS

CSS And SEO Small Tips

CSS

  • 只出現一次的就要用 ID。
  • double class 是指同一個 DOM element 下了兩個 class,應該改用 sass mixin。
  • 會有 id 恐懼症表示對目前的網頁結構沒有概念,應該是實作不夠,什麼東西該出現一次應該是在寫 html 時就想好的。寫網頁,應該是在腦中已經有了個概念,一次將 html 架構出來再用 css 來調版面。
  • 記得所有用文字的 img 一定要再加文字上去,舉例來說,地址可以用 img,但是其實他是文字說明公司地址,所以應該是用 p+內文 然後隱藏。 最後用背景圖片顯示比較漂亮的字型。

SEO

  • 不要忘了 html 只是文件結構而不是讓你好排版的架構。 想想你這份文件想表達的是什麼東西。 最簡單的方法就是當你 css 拿掉時這份文件對人們來說是否還有意義。
  • 基本上在前端命名統一都用 dash。其實 dash, underscore, camel case 都是合法的使用方式。 有一說法是老舊的瀏覽器不支援 underscore as css selector。 不過現在市面上常見的瀏覽器都有支援了。 但你看看各大 library 的命名方法。 都是用 dash(hyphen),這背後一定有他的設計理念。至於 url、img、css、js 等等的檔案命名用 dash 對 seo 有幫助。this-is-an-img 對搜尋引擎來說是 this is an image,this_is_an_image –> thisisanimage。