(技)CSS常見名稱定義

現在工作經常性要用到CSS來編排與設定網頁的畫面,之前在Jane's Blog裡面有做了些常見的CSS名稱定義,我在這邊把它延伸一下,綜合CSS大師jeffreey zeldman 的縮寫與CSS優化觀念,增加了一些我在工作上面常用到的CSS名稱,做成了對我們部門所做的CSS名稱建議表,而之前的"超快速網頁設計方式"內的snippets名稱也是按照這裡定義的名稱去設定的(還敢講!! 下載檔案說要給都還沒給!!太混了吧),暫時先記錄在這,看有沒有人想繼續補充貨是覺得有更好的名稱~歡迎一起討論與留言,目前名稱定義如下

CSS class name 區塊描述
wrap(wrapper) 頁面內容最大區塊
header 頁首
footer 頁尾
layout 排版用的表格
logo 網站LOGO
search 搜尋
advSearch 進階搜尋
nav(navgation) 導覽列
subNav 子導覽
menu 主選單
subMenu 子選單(副選單)
category 分類選單
update 更新時間
date 時間
visitor 瀏覽人次
print 友善列印
path 路徑,又稱麵包屑(常見的網站階層記錄)
page 分頁(就像GOOGLE搜尋結果下面的分頁)
pre 上一頁
next 下一頁
download 下載
related 相關連結
more 更多(如:更多訊息)
qLink (quick Link) 快速連結,如:回頁首、回上一頁...等
epaper 電子報
login 登入
register 註冊
copyright 版權宣告
privacy 隱私權宣告
accessibility 無障礙網頁空間宣告
markA 無障礙標章
ad 廣告橫幅
help 說明
vote 投票
forum 討論
album 相簿
msg 訊息
menber 會員
video 影音
group 分眾
service 服務
tip 提示、技巧
sitemap 網站地圖
about 關於
news 新聞
events 活動
headline 頭條新聞
instant 即時新聞
color 色彩更換
text 字體大小更換

 

所有命名採用的方式為區塊本身的意義而非區塊的位置,目前會有爭議的部分則是頁首(header)與頁尾(footer)部分,因為像是以位置來做的命名,其他部份來說,大體上都以本身的功能或意義來命名,未來看是否有增加或是建議的常用名稱,這樣讓整個Team在維護他人的CSS時會更方便,相對的~在對畫面的溝通與編輯會更沒有阻礙。

留言

dudu寫道…
感謝分享!
匿名表示…
老師~
你教的真好…
真懷念你的教學
To:兩位
謝謝!
有空多來逛逛喔^^
Away寫道…
這個讚~在下英文不好,正好可以拿來做參考!
To:DFUNS
呵呵~還是要多參與全球性的討論比較好~這個我覺得還有改進的空間~
另外~我目前沒處理到較大型的入口網站,這些我也沒有全部用到說~^^
4星寫道…
很實用呢!感謝分享

熱門文章