Reset CSS 只選對的,不選 貴 的

2021-07-10 03:37:37 字數 3495 閱讀 5624

原文:

先耐人深思,令人回味下

1.你知道reset css是什麼東東嗎?2. 

* 你還在用嗎?

3. 你打造了自己的reset css 嗎?

4.打造過程中你使用了ctrl

+c和ctrl

+v嗎?

關於reset css的類似問題還有很多,reset.css極其簡單又極其複雜,本文之所以叫做<回答

我先回答一下上面的四個問題,進而本文逐漸展開。

1.reset css 是什麼東西,想必做前端的人都應該知道的,這裡不在多說

2.* 的學名是global white space reset

. 從原文中可以看出這個方法剛問世時是非常火爆的,並且作者建議一定要先破後立,要將清掃差異和重置預設樣式結合起來,這樣才是正確的做法。為何這個方法在問世之初風光一時,而後又被大家摒棄?其實它的長處和短處都過於明顯,* 對於style的處理機制是管你誰是誰,上去一頓降龍十八掌,打完再說,先破再利,卻不知這樣做帶來了麻煩無限(因為被抹平的樣式,你得再重新設定回來,比如input的padding等),乙個缺點和有點同樣明顯的東東,我們還是不用為妙。

3.針對第三個問題,你的回答我想應該是「是的」,但是如果你考慮到本文標題,估計就會說的有些心虛了。為什麼心虛呢?請往下看......

4.心虛的原因是打造過程中使用了ctrl+c和ctrl+v,這說明你的reset css 是從那個站點或者個人blog或者網頁原始檔裡拷貝來的,原封不動,直接用在專案中去了。

中國網際網路很好的繼承了中華民族的優良傳統,你抄我的,我抄你的,抄來抄去,各種reset css 長的都差不多,抄的過程中,努力去做到求實求證,努力求乙份自己的理解,很難很難。但只要孜孜不倦,終究會有所獲,有所得,有所悟。

《打造自己的reset css》

《reset css研究(八卦篇)》

《reset css研究(技術篇)》

玉伯和正淳一起整理的乙份 reset.css:    

kissy css reset

理念:清除和重置是緊密不可分的

特色:1.適應中文 2.基於最新主流瀏覽器

維護:玉伯([email protected]), 正淳([email protected])

*//*

清除內外邊距 

*/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 

/*structural elements 結構元素 

*/dl, dt, dd, ul, ol, li, 

/*list elements 列表元素 

*/pre, 

/*text formatting elements 文字格式元素 

*/fieldset, lengend, button, input, textarea, 

/*form elements 表單元素 

*/th, td 

/*設定預設字型 

*/body,

button, input, select, textarea 

h1 h2 

h3 h4, h5, h6 

address, cite, dfn, em, var 

/*將斜體扶正 

*/code, kbd, pre, samp, tt 

/*統一等寬字型 

*/small 

/*小於 12px 的中文很難閱讀,讓 small 正常化 

*//*

重置列表元素 

*/ul, ol 

/*重置文字格式元素 

*/a 

a:hover 

abbr[title], acronym[title] 

q:before, q:after 

/*重置表單元素 

*/legend 

/*for ie6 

*/fieldset, img 

/**/

/*注:optgroup 無法扶正 

*/button, input, select, textarea 

/*重置**元素 

*/table 

/*重置 hr 

*/hr 

/*讓非ie瀏覽器預設也顯示垂直滾動條,防止因滾動條引起的閃爍 

*/html 

測試過的瀏覽器:ie 6+, firefox 3.5+, safari 4+, chrome 2+, opera 10+       

解釋一些和 yui cssreset

的差異點:

清除內外邊距的元素,去掉了 div, code(在測試瀏覽器中,沒發現有邊距), 增加了 button(感覺是 yui 遺漏了). 

2去掉了 yui 裡對 html 顏色和背景色的設定。在測試瀏覽器中,沒有發現差異。(要設的話,推薦background: transparent) 

3對於 address, caption, …, em, strong 等文字格式元素,做了調整。保留了 strong 和 th 的粗體。 

4對 abbr 和 acronym 做了調整,使得在非 ie6 下可視性更好。 

5去掉了 sup 和 sub 的樣式,直接用瀏覽器預設的即可。 

6對於 input, select, textarea 表單元素,去掉了針對 ie 的 inherit, 只保留了 font

-size 的 inherit hack. 因為其它 hack 經測試已失效。 

7增加了一些元素的預設樣式。 

此外,對整體**的組織形式做了調整,按照元素的類別將**進行了分組

請記住:永遠不存在萬能解決方案,永遠沒有銀彈。

因此我的建議和 eric 是一樣的:請根據具體需求,適量裁剪和修改後再使用

比如針對**,可以在 reset.css 的基礎上,修改為 reset-taobao.css

.如果是個人部落格,我個人喜歡的乙個方案是:reset-blog.css

.相關測試頁面請檢視:cssreset svn

.真實使用時,請用壓縮後的版本:reset-min.css

.對於 reset.css

本身,我們期待它能盡量多的適用於各種場景,但不期待它能解決所有問題。目前而言,reset.css 裡的預設樣式,是玉伯和正淳等各位同事和朋友們實踐經驗的總結,算是「精挑細選」,但不期待能解決所有問題。

最後,期待你的參與和建議。如果這份 reset.css 能有幸在你的專案中得到使用,則非常期待你的反饋。

作者建議:

1.真是專案中可以這樣:reset css +fonts.css /base.css/layout.css.......相結合的方式

2.在reset css中 沒用到的元素可以直接拿掉,減少**量

3.在reset css中做好版本維護資訊,方便擴充套件

最後建議:

網上所有的reset css 都不是你自己的reset css ,包括玉伯整理的這個,使用前請深思本文開頭的話,量身打造,只選對的,不選"貴"的。

裝修常識 只選對的不選貴秘訣

牆內不省牆外省 埋入牆內的電線和水管要選擇品質好的,因為一旦出了問題要修理代價很大。而掛在牆上的裝飾品 窗簾 燈具等則選擇相對便宜的,一來修理更換很方便,二來,時間長了,如果要更換新的也不會太心疼。開關不省插座省 大多數人買開關插座往往選擇同一品牌的,我的選擇是開關買好的品牌,插座則選擇普通品牌的。...

詳解Windows8版本異同 選對不選貴

近日,微軟正式發布了其新一代作業系統windows8,這是一版手持裝置與pc通用的作業系統,自此可以讓我們的手機 平板與家用電腦之間更好的通訊。相信一段時間裡使用者購買嘗鮮的使用者不在少數,但是對於普能使用者來說應該選擇購買哪乙個版本呢?微軟的 windows8 作業系統提供了4個不同的版本,分別是...

SEO優化之關鍵字只選對的不選氾濫的

什麼叫關鍵字?所謂關鍵字,英文是keyword,就是希望訪問者了解的產品 服務或者公司等內容名稱的用語。簡單的來說,使用者通過搜尋引擎找到企業提供的服務的詞就叫做關鍵字。做好了 優化,選對了關鍵字對於企業來說可以比十個甚至是更多的業務人員帶來的價值更大,帶來的客戶更多,最重要的是成本比較低獲利大。那...