[討論] 寫網頁的規範及應遵守的事項

[wukoto (吳飛)]

會想討論這個是因為最近在網頁工作遇到了很多問題，我從國中就對網頁有興趣，高中開

始自學網頁（學得很破），到大學開始轉往平面設計，等到出社會才又回頭做網頁設計，

如今也過了四年，我本身可以說是有點龜毛的個性，你也可以說我有強迫症，總之，我對

網頁設計的要求有點詭異，就拿上家公司來說，有一次我為了 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://www.ptt.cc/bbs/Web_Design/M.1400686504.A.1A9.html
※ 編輯: wukoto (1.163.221.187), 05/21/2014 23:36:00
→ lyforever:html強迫症 大概要改用jade, css可以改用sass或stylus
→ lyforever:不用preproccessor 只有靠規範和檢查工具
→ lyforever:但是整個team沒有共識的話 怎麼座都有點困難XD
→ oj113068:多人合作的話，這方面如果不是協調就是要寬心...
→ ss163500:找一間客人肯花錢、沒有網頁菜鳥跟不懂技術的主管的公司
推 GoalBased:我只知道我的vs可以自動排板= =
推 Fantasywind:我比較好奇這行 h1 {font-weight: bold;}怎麼了 中文?
→ powerkaifu:應該是h1本身已經有粗體，加粗好像多此一舉...
→ mmis1000:因為cssreset會把全部樣式初始化...
→ mmis1000:包括font-weight
→ mmis1000:http://goo.gl/JWqXMT
→ mmis1000:但這東西 .title{font-weight: bold;} 會比較好
→ mmis1000:你怎麼知道所有h1都應該加粗體？
→ danny8376:h1預設粗體沒啥問題啊 有class的都能蓋掉
→ danny8376:至於第一點... 如果那是全站預設的h1~6
→ danny8376:放reset到也沒啥不可 沒人規定叫reset.css就要全清空
→ danny8376:至於第三點的background/background-color我到覺得沒啥
→ danny8376:畢竟bg-color本來就是bg的一個子項...
推 Fantasywind:哈晃神了 我以為你的問題在後面 bold
→ alog:如果你可以做主再來要求.
→ alog:或做code review 的時候再來提出
推 ChenCH1986:你是對的
推 pm2001:排版交給IDE就對了
→ wukoto:我個人習慣把 reset.css 只用來設定瀏覽器一致性，公用排
→ wukoto:版樣式寫在別的檔，真要寫我會寫 inherit，讓他們隨著區塊
→ wukoto:設定去變動。
→ wukoto:至於我現在不出來要求的原因，就是因為我不是當家作主的…
→ danny8376:我只知道production全包成一個css最理想XD
→ danny8376:然後既然你不是做主... 除了盡所能說服外 只能接收XD
推 turtleknight:裝個Sublime-HTMLPrettify解決你所有煩腦
推 Luos:推樓上 超好用
推 a83294:html prettify我按下去怎麼一點感覺都沒XD好像沒支援erb?
※ 編輯: wukoto (1.163.221.187), 05/22/2014 21:47:02
推 aspdoctor:用haml就強迫縮排了
→ liaosankai:我覺得 Netbean8 滿不錯的
→ wukoto:公司制度問題...綁死在 Dreamweaver。
→ alog:Dreamweaver 就用樣板的時候開起來..@.@
→ alog:其他都在 Sublime Text 完成
推 yanli2:寫網頁的規範及應遵守的事項: 老闆爽
推 aceone:haml+sass 省時又好寫
推 lairrol:你自己用JS寫Parser.....