作者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/cn.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