命名禁止缩写
- 精简扼要地对
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去写。