作者wukoto (吳飛)
看板Web_Design
標題[討論] 寫網頁的規範及應遵守的事項
時間Wed May 21 23:35:02 2014
會想討論這個是因為最近在網頁工作遇到了很多問題，我從國中就對網頁有興趣，高中開
始自學網頁（學得很破），到大學開始轉往平面設計，等到出社會才又回頭做網頁設計，
如今也過了四年，我本身可以說是有點龜毛的個性，你也可以說我有強迫症，總之，我對
網頁設計的要求有點詭異，就拿上家公司來說，有一次我為了 h1 {font-weight: bold;}
跟主管吵了半天，就因為我覺得這樣寫根本多此一舉。
我本身是平面設計出身，所以我對網頁的技術僅限於 HTML 與 CSS，還有一些基礎 JS 的
套用，但我不知道為什麼，天生就很討厭東西排得不夠整齊。
就像這樣：
<div>
<ul>
<li>這個世界多麼美好，空氣多麼清新</li>
</ul>
</div>
但接著可能我放假去了，同事接手：
<div>
<ul>
<li>這個世界多麼美好，空氣多麼清新</li>
</ul>
</div>
這種時候我總是可以聽到腦袋理智斷裂的聲音，或是體會到什麼是自己的老婆被隔壁老王
睡走的感覺，總之我實在是相當討厭別人的 HTML 排的歪七扭八，就連我打這個例子的當
下，也是感到很痛苦。
最近公司在搞一個手機板的網頁，我比較少做大規模網站的經驗，所以我不知道各位是怎
麼規劃，但是我們公司的規劃就是大家一起做（這算規劃嗎？）這樣，簡單來說就是我做
登入註冊，同事甲做會員規範，同事乙做會員專區，然後各自切各自的版，我實在不太認
同這種做法，因為在沒有妥善規劃下就要這樣各司其職，我可以預見未來這網站必然沒有
一致性，這個站目前已經出現一些問題，在當初我把檔案規劃好以後，就被修改的我認不
出來了。
一、不知道為什麼硬要把一些 Layout 屬性放進 reset.css？
這個站的 reset.css 有著 h1 ~ h6 的樣式，這種東西在我個人認知，不是應該拿出
來放在其他跟版面有關的檔案裡面嗎？
二、很豪邁的寫了 p {color: #FFF;}。
呃，如果是我，我不會直接下這種設定，誰知道明天會不會有一頁白底的頁面，或者
我會在前面多加一個 Class。
三、最令我崩潰的排版問題。
你可以看到 CSS 有 2-space、4-space、Tab 的各種縮排，還有縮成一行，跟沒縮
成一行的，呃，總而言之就是不統一的寫法，就像這樣：
header {background: #000;color: #FFF;}
footer {background-color:#000; color:#FFF;
}
你冒號後面到底要不要空格？你分號後面到底要不要空格？
你到底要一行還兩行？你到底要用 background 還是 background-color？
你搞的我好亂啊！！！（強迫症發作）
抱歉，寫的有點崩潰了，明日還要上班，我先寫到這裡，不知道各位前輩有沒有類似的經
驗的（抑或你也跟我一樣是強迫症患者），如果你能提供一些你過去的經驗與解決方案，
或者一些閒聊也好，我會很感激你的，謝謝。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.163.221.187
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1400686504.A.1A9.html
※ 編輯: wukoto (1.163.221.187), 05/21/2014 23:36:00
1F：→ lyforever:html強迫症 大概要改用jade, css可以改用sass或stylus 05/22 00:01
2F：→ lyforever:不用preproccessor 只有靠規範和檢查工具 05/22 00:02
3F：→ lyforever:但是整個team沒有共識的話 怎麼座都有點困難XD 05/22 00:03
4F：→ oj113068:多人合作的話，這方面如果不是協調就是要寬心... 05/22 00:04
5F：→ ss163500:找一間客人肯花錢、沒有網頁菜鳥跟不懂技術的主管的公司 05/22 00:07
6F：推 GoalBased:我只知道我的vs可以自動排板= = 05/22 01:02
7F：推 Fantasywind:我比較好奇這行 h1 {font-weight: bold;}怎麼了 中文? 05/22 02:32
8F：→ powerkaifu:應該是h1本身已經有粗體，加粗好像多此一舉... 05/22 03:20
9F：→ mmis1000:因為cssreset會把全部樣式初始化... 05/22 03:38
10F：→ mmis1000:包括font-weight 05/22 03:39
12F：→ mmis1000:但這東西 .title{font-weight: bold;} 會比較好 05/22 04:20
13F：→ mmis1000:你怎麼知道所有h1都應該加粗體？ 05/22 04:20
14F：→ danny8376:h1預設粗體沒啥問題啊 有class的都能蓋掉 05/22 04:46
15F：→ danny8376:至於第一點... 如果那是全站預設的h1~6 05/22 04:48
16F：→ danny8376:放reset到也沒啥不可 沒人規定叫reset.css就要全清空 05/22 04:48
17F：→ danny8376:至於第三點的background/background-color我到覺得沒啥 05/22 04:50
18F：→ danny8376:畢竟bg-color本來就是bg的一個子項... 05/22 04:51
19F：推 Fantasywind:哈晃神了 我以為你的問題在後面 bold 05/22 05:31
20F：→ alog:如果你可以做主再來要求. 05/22 06:43
21F：→ alog:或做code review 的時候再來提出 05/22 06:46
22F：推 ChenCH1986:你是對的 05/22 09:39
23F：推 pm2001:排版交給IDE就對了 05/22 10:46
24F：→ wukoto:我個人習慣把 reset.css 只用來設定瀏覽器一致性，公用排 05/22 11:14
25F：→ wukoto:版樣式寫在別的檔，真要寫我會寫 inherit，讓他們隨著區塊 05/22 11:14
26F：→ wukoto:設定去變動。 05/22 11:14
27F：→ wukoto:至於我現在不出來要求的原因，就是因為我不是當家作主的… 05/22 11:17
28F：→ danny8376:我只知道production全包成一個css最理想XD 05/22 11:22
29F：→ danny8376:然後既然你不是做主... 除了盡所能說服外 只能接收XD 05/22 11:22
30F：推 turtleknight:裝個Sublime-HTMLPrettify解決你所有煩腦 05/22 11:30
31F：推 Luos:推樓上 超好用 05/22 11:50
32F：推 a83294:html prettify我按下去怎麼一點感覺都沒XD好像沒支援erb? 05/22 20:35
※ 編輯: wukoto (1.163.221.187), 05/22/2014 21:47:02
33F：推 aspdoctor:用haml就強迫縮排了 05/22 22:20
34F：→ liaosankai:我覺得 Netbean8 滿不錯的 05/22 23:10
35F：→ wukoto:公司制度問題...綁死在 Dreamweaver。 05/23 00:01
36F：→ alog:Dreamweaver 就用樣板的時候開起來..@.@ 05/23 02:02
37F：→ alog:其他都在 Sublime Text 完成 05/23 02:02
38F：推 yanli2:寫網頁的規範及應遵守的事項: 老闆爽 05/26 13:37
39F：推 aceone:haml+sass 省時又好寫 05/26 14:07
40F：推 lairrol:你自己用JS寫Parser..... 05/31 10:05