iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
1
自我挑戰組

30天的切版日記系列 第 3

Day3 : 引入reset.css之後

  • 分享至 

  • xImage
  •  

從一些網站當中右鍵檢視網頁原始碼,會看到這麼一隻css - reset.css
<link type="text/css" rel="stylesheet" href="css/reset.css">
打開一看 :

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
/*h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}*/
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: 0;
}

reset.css的用途,就是讓各個瀏覽器統一css,讓其歸零。
在寫網頁的時候先引入reset.css然後再引入自己的css去覆蓋reset.css。
不是說程式越少越好嗎?為什麼要做這種“覆蓋”的動作?
???
嗯...喔..這網站還擺了normalize.css

這個margin:0; padding:0; 比如div這個標籤沒默認。估了一下,有人在stackoverflow整理了各家瀏覽器的default styles

還未仔細鑽研,不過這reset.css 讓我想起引入資源的各種像是排序、彼此覆蓋、一大堆有用跟無用的 !important 、一大堆後來加入的class所造成的維護困難, 尤其像是維護前人或以前的自己所做的東西,或以原有架構跟資源再去新增的狀況。

不知道大家都用什麼好方法在處理這樣的狀況,
打開f12看到一堆槓槓真的是............./images/emoticon/emoticon21.gif 使寒冷的冬天更冷了


上一篇
Day2: RWD斷點
下一篇
Day4 : 人人都說Sass好,所以我來參一腳
系列文
30天的切版日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言