[讨论] 写网页的规范及应遵守的事项

楼主: wukoto (吴飞)   2014-05-21 23:35:02
会想讨论这个是因为最近在网页工作遇到了很多问题,我从国中就对网页有兴趣,高中开
始自学网页(学得很破),到大学开始转往平面设计,等到出社会才又回头做网页设计,
如今也过了四年,我本身可以说是有点龟毛的个性,你也可以说我有强迫症,总之,我对
网页设计的要求有点诡异,就拿上家公司来说,有一次我为了 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?
你搞的我好乱啊!!!(强迫症发作)
抱歉,写的有点崩溃了,明日还要上班,我先写到这里,不知道各位前辈有没有类似的经
验的(抑或你也跟我一样是强迫症患者),如果你能提供一些你过去的经验与解决方案,
或者一些闲聊也好,我会很感激你的,谢谢。
作者: lyforever (LY)   2014-05-22 00:01:00
html强迫症 大概要改用jade, css可以改用sass或stylus
作者: lyforever (LY)   2014-05-22 00:02:00
不用preproccessor 只有靠规范和检查工具
作者: lyforever (LY)   2014-05-22 00:03:00
但是整个team没有共识的话 怎么座都有点困难XD
作者: oj113068 (橘子汁)   2014-05-22 00:04:00
多人合作的话,这方面如果不是协调就是要宽心...
作者: ss163500 (ss163500)   2014-05-22 00:07:00
找一间客人肯花钱、没有网页菜鸟跟不懂技术的主管的公司
作者: GoalBased (Artificail Intelligence)   2014-05-22 01:02:00
我只知道我的vs可以自动排板= =
作者: Fantasywind (Fantasywind)   2014-05-22 02:32:00
我比较好奇这行 h1 {font-weight: bold;}怎么了 中文?
作者: powerkaifu   2014-05-22 03:20:00
应该是h1本身已经有粗体,加粗好像多此一举...
作者: mmis1000 (秋月恋枫)   2014-05-22 03:38:00
因为cssreset会把全部样式初始化...
作者: mmis1000 (秋月恋枫)   2014-05-22 03:39:00
包括font-weight
作者: mmis1000 (秋月恋枫)   2014-05-22 03:40:00
作者: mmis1000 (秋月恋枫)   2014-05-22 04:20:00
但这东西 .title{font-weight: bold;} 会比较好你怎么知道所有h1都应该加粗体?
作者: danny8376 (钓到一只猴子@_@)   2014-05-22 04:46:00
h1默认粗体没啥问题啊 有class的都能盖掉
作者: danny8376 (钓到一只猴子@_@)   2014-05-22 04:48:00
至于第一点... 如果那是全站默认的h1~6放reset到也没啥不可 没人规定叫reset.css就要全清空
作者: danny8376 (钓到一只猴子@_@)   2014-05-22 04:50:00
至于第三点的background/background-color我到觉得没啥
作者: danny8376 (钓到一只猴子@_@)   2014-05-22 04:51:00
毕竟bg-color本来就是bg的一个子项...
作者: Fantasywind (Fantasywind)   2014-05-22 05:31:00
哈晃神了 我以为你的问题在后面 bold
作者: alog (A肉哥)   2014-05-22 06:43:00
如果你可以做主再来要求.
作者: alog (A肉哥)   2014-05-22 06:46:00
或做code review 的时候再来提出
作者: ChenCH1986 (Chen,C.H.)   2014-05-22 09:39:00
你是对的
作者: pm2001 (做个盾牌眼球兵吧)   2014-05-22 10:46:00
排版交给IDE就对了
楼主: wukoto (吴飞)   2014-05-22 11:14:00
我个人习惯把 reset.css 只用来设定浏览器一致性,公用排版样式写在别的档,真要写我会写 inherit,让他们随着区块设定去变动。
楼主: wukoto (吴飞)   2014-05-22 11:17:00
至于我现在不出来要求的原因,就是因为我不是当家作主的…
作者: danny8376 (钓到一只猴子@_@)   2014-05-22 11:22:00
我只知道production全包成一个css最理想XD然后既然你不是做主... 除了尽所能说服外 只能接收XD
作者: turtleknight (turtle)   2014-05-22 11:30:00
装个Sublime-HTMLPrettify解决你所有烦脑
作者: Luos (Soul)   2014-05-22 11:50:00
推楼上 超好用
作者: a83294 (马岱)   2014-05-22 20:35:00
html prettify我按下去怎么一点感觉都没XD好像没支援erb?
作者: aspdoctor (大崎)   2014-05-22 22:20:00
用haml就强迫缩排了
作者: liaosankai (低温烘焙)   2014-05-22 23:10:00
我觉得 Netbean8 满不错的
楼主: wukoto (吴飞)   2014-05-23 00:01:00
公司制度问题...绑死在 Dreamweaver。
作者: alog (A肉哥)   2014-05-23 02:02:00
Dreamweaver 就用样板的时候开起来..@.@其他都在 Sublime Text 完成
作者: yanli2 ( Yan™)   2014-05-26 13:37:00
写网页的规范及应遵守的事项: 老板爽
作者: aceone   2014-05-26 14:07:00
haml+sass 省时又好写
作者: lairrol (小黑)   2014-05-31 10:05:00
你自己用JS写Parser.....

Links booklink

Contact Us: admin [ a t ] ucptt.com