reset.css與base.css

在製作網頁時
除了視覺漂亮、架構漂亮、語意正確、選擇器命名的藝術…之外
最基本的是首先要把各大瀏覽器的預設值統一
大部分的人都喜歡選擇 reset.css 去重置瀏覽器的設定
但此時每個 html 中的元素該有的樣子都不見了
包括標題們從 h1~h6 的大小、ul 和 ol 的 list-style-type…等等

而 base.css 則是把所有瀏覽器的預設樣式保留且統一
兩者都有其優點和缺點

reset 用下去,想要多大多小自己重新指定 padding、margin 也重新定義
其實已經算方便了,但 base 的作用是什麼呢?

比方說在一個部落格平台 (pixnet、wretch…)
在寫樣式的時候若有保留原有的樣式
使用者在新增文章時若直接使用 ol、ul 等在文章中
就可以正常顯示了
不需要另外對文章內的東西另下選擇器並且加註在 css 中

以往我在貢獻樣式到後台供人套用的時候,都使用了 reset
這造成了許多套用樣式後的人編輯文章時那些 list 等等的效果都消失了
也無法直接把 reset 拿掉,否則頁面上很多 list 的小點點又俏皮地打亂了樣式
所以在製作類似這種用途的樣式時
可以考量將 reset 和 base 綜合起來整理

Yahoo 的 ui 設計師是怎麼打造 reset.css 和 base.css 的呢?

除了設計和製作的方便外
若是公開平台的 css 設計則還得考量到使用狀況的變數
細心真的是挺重要的一環,思考需要謹慎一些

2 thoughts on “reset.css與base.css

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s