CSS团队协作规范

class
class name

禁止在非特殊情况下写 ！important

• CSS本身有权重设计，任意地使用 !important 会造成权重混乱而无法维护。

不可轻易限定宽高

• 用户可以自行设定自己的浏览器，例如 Android 手机可以设定显示字体大小，写死的高度会让字体相互重叠。

RWD失效

• 移动设备的高度是无限的，宽度是有限的。
• 请不要把宽写死。

img 请让它自动缩放

• 请不要替 img 的容器设定宽或高，让它根据设备自行缩放。
• 请使用 bootstrap 的 img-responsive 。

• 如果确实要用：

  width: 100%;
  height: auto;
  

• 如果要给 img border-radius 设定样式，请使用父元素控制行为，保持 img 只载入图片，没有样式。

优先使用 grid 排版

• 请不要花很多时间在写 media query ，设定一堆 breakpoint ，自己写组件样式，自己控制每种设备上的容器宽度。
• 请使用 grid system ，这些都是已经成熟的框架，而且有些也已经帮你处理了浏览器相容问题。

不可直接 over write 或在原本框架的 class 增加内容

class
class

设计RWD网站，请遵循移动设备优先原则

HTML/CSS

手机开启网页很吃手机效能和网络状况，前端工程师一开始就以手机版为优先，可以让HTML一开始载入，使用最少的效能快速载入网页。当开始制作桌面版时，只会少许跑版，做适当微调即可。

相反，如果先制作桌面版，当手机版画面被切掉或是跑版，需要花更多时间去调整。

再来是iPhone手机的 retina ，会将图片放到手机上时自动做两倍缩小，在一开始制作时即可发现图片载入是否吃效能。为了让图片能在iPhone上有更好的体验，建议移动版优先。

不可使用 html tag selector

• 请直接定义 class 的样式，不需要指定 html tag 。

层级不可以超过三层

• 超过三层表示耦合度太高，不具有弹性、可维护性。

用一样的 element 时不要把一堆东西全部写在里面，请把排版相关的独立出来

• 把 border-radius 写在 img 上面，请把 img 保持干净。定位，例如 position: absolute;

不要随意 none 掉画面上的 tag 或行为

none
reset.css
class

reset.css

• 常见的 a tag 不要有 underline
• list 消除原有样式
• 请在 reset.css 上定义，并且设为第一载入次序

有JavaScript行为的 class 可以为命名加入 name space

#js-project-show {}

请勿任意使用 br hr tag

• br 是换行，请使用在 p tag 里面，当 p 里面文字过多时可以使用。
• hr 是快速划线，但是即将被淘汰，请直接使用 border 写在 class 里面。
• br 必须去思考父区块是不是 display: block; ，如果要换行，应该思考是不是下一段文字。
• 线条请都是用 border 去写。