CSS规范问题

代码规范化处理

实现还原度

• 看清设计稿不要出现错别字
• 设计稿中有设计好的间隔、距离、对齐方式…一定要高度还原

代码问题

• 删除无用代码

• 不要给固定的高，父元素的高应该由子元素撑起来。避免定位是父元素撑不起了高

• 拒绝代码的复用

• 引入框架时，不要用人家自定义了类来进行重写，要自己定义一个类名

• 少于3个属性的不要进行简写 比如 margin: ‘0 20px’;

• 定义公用代码的时候不给所有的都添加共同类，我们可以使用伪类选择器 li:nth-of-type(n) 表示所有和 li 同级

规范问题

• 代码都要首行缩进2个字符

• 去掉所有多余的空格

• .listing 后要有空格 : 之后要有空格

• 不要在颜色值 rgb(), rgba(), hsl(), hsla(), 和 rect() 中增加空格

• 一般而言不用标签选择器

• 注释独占一行

• 给没有自行注释的代码写上详细说明，比如：为什么是使用了z-index

属性定义顺序

1. Positioning

     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 100;
   

2. box model 盒模型

     display: block;
     float: right;
     width: 100px;
     height: 100px;
     margin: 1px 2px 3px 0;
     padding: 1px 2px 3px 0;
   

3. typographic排版

     font: normal 13px "Helvetica Neue", sans-serif;
     line-height: 1.5;
     color: #333;
     text-align: center;
   

4. visual A外观

     background-color: #f5f5f5;
     border: 1px solid #e5e5e5; 
     border-radius: 3px 2px;不能这样写 如果角都设置可以这样
     border-top-left-radio: 2px;
   

• padding margin font background border border-radius 我们不需要设置简写属性

BEM命名

• 避免过度抽象域过度具体
• B,B__E,B–M,B-E–M
• 一个dom节点不要超过5个类名（过多的组合反而会导致阅读困难）
• 块之间相互独立 元素依赖与块 修饰符依赖于块或者元素
• 不要使用整个根节点要要学会建立分支 比如 content-login__form login-message
• 元素的书写关系也是为了避免嵌套
• 对JS绑定事件 要使用class=“js-modal”

最近在公司实习，学习了一些代码的规范化处理，我们的代码就是我们的衣服一样整齐了才好看。所以写前端代码的小伙伴一定要注意代码规范哦，尤其是对模块划分的时候，命名方式要从基础练习呀。