今天完成的事情：

一.开发过程中应该遵守哪些编码规范和class命名规范？

1.背景介绍

规范，一个优秀的公司必然有一个优秀的团队，一个优秀的团队必然要有一个好的规范来约束和执行。国内基本各大互联网公司的前端都有自己的开发规范，但总的宗旨基本都是：代码简、易维护、性能高。对于一个大型项目经常会多人协作，这时必须要有一个好的规范才能顺利便捷地进行下去。

总而言之：不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

2.知识剖析

基本准则

符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.

html规范

页面的第一行添加标准模式声明!DOCTYPEhtml

代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）

html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写

建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"

不同doctype在不同浏览器下会触发不同的渲染模式

非特殊情况下样式文件必须外链至…之间;非特殊情况下JavaScript文件必须外链至页面底部

尽可能减少div嵌套.

在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中

对于属性的定义，确保全部使用双引号，绝不要使用单引号

背景图片请尽可能使用sprite技术,减小http请求

给区块代码及重要功能(比如循环)加上注释,方便后台添加功能

不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。

css规范CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)


2.大小(width, height, padding, margin)


3.文字系列(font, line-height, letter-spacing, color- text-align等)


4.背景(background, border等)


5.其他(animation, transition等)

排版规范

如果是在html中写内联的css，则必须写成单行

每一条规则的大括号{前后加空格

属性名冒号之前不加空格，冒号之后加空格

每一个属性值后必须添加分号;并且分号后空格

多个selector共用一个样式集，则多个selector必须写成多行形式

规则书写规范

使用单引号，不允许使用双引号

每个声明结束都应该带一个分号，不管是不是最后一个声明

除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写

除了重置浏览器默认样式外，禁止直接为htmltag添加css样式设置

每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性

class命名

规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_

命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合+

不允许通过1、2、3等序号进行命名；避免class与id重名

class用于标识某一个类型的对象，命名必须言简意赅

尽可能提高代码模块的复用，样式尽量用组合的方式

规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名

3.常见问题

问题1:class命名有什么常用方式？

4.解决方案

在实际编程中，命名问题一直是很麻烦的问题，要想代码可读性高，维护方便，就必须规范命名。这里介绍几种命名方法

原子类命名规则

将复用性高的单条属性直接命名成类

.ml5{margin-left:5px;}

模块命名规则

按照职能划分命名规则

例如，模块是nav，便可以命名nav-tittle、nav-left

BEM

BEM思想是由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。这是通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外。

BEM的命名规矩很容易记：block-name__element-name–modifier-name，也就是模块名+元素名+修饰器名

5.编码实战

暂无

6.扩展思考

问题一:原子类的优劣？

原子类在网上争议非常大，原子类简单方便，但是不宜维护，控制困难。原子类其实不是一种工具，而是一种编写CSS的思想，即：抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。但是不宜过度使用，负责就和直接添加style没有区别了，在涉及数值方面我的建议时不要使用原子类，否则修改起来超级麻烦，可以使用less、sass等代替.

7.参考文献

如何规范CSS的命名和书写？

HTML+CSS日常编码规范

编码规范

8.更多讨论

问：box-sizing 在css书写顺序中的位置

答，这个是属于盒子宽度大小，放在前面，属于第一类。

问：头像一般怎么命名的

答:avatar，在具体可以在块加上命名，比如head-avatar

问：单个类书写的规范？比如很多属性的那种

答，总的来说是，重要的放在前面。

1.位置属性(position, top, right, z-index, display, float等)


2.大小(width, height, padding, margin)


3.文字系列(font, line-height, letter-spacing, color- text-align等)


4.背景(background, border等)

5.其他(animation, transition等)

二.完成了任务13

$border:15px solid;
@mixin box($width,$height,$background){
   width:$width;
  height:$height;
  background:$background;
}
body{
  margin:0;
  background-color:#f0f0f0;
}
header{
  @include box(100%,60px,#29bde0);
  vertical-align: middle;
  display:flex;
  align-items:center;
}
.three{
  margin-left:15px;
}
.last{
  @include box(90%,7vw,white);
  outline:none;
  border:none;
  margin-left:5%;
  margin-top:1vw;
  margin-bottom:1vw;
  display:flex;
  justify-content: space-between;
  font-size:15px;
  color:#6a7b7f;
}
.game{
  margin-left:5%;
}
.box{
  width:90%;
  background-color:white;
  margin-left:5%;
  text-align:center;
   img{
    width:50px;
  }
   p{
    text-align:center;
    margin-top:10px;
    margin-bottom:0;
    color:#6a7b7f;
  }
   button{
    width:80%;
    height:6.5vw;
    margin-top:1vw;
    background-color:#29bde0;
    color:white;
    font-size:15px;
    outline:none;
    border:none;
  }
   div{
    display:flex;
    align-items:center;
    justify-content: center;
    width:100%;
    border-bottom:1px solid orange;
    height:8vw;
     span{
       color:orange;
       font-size:15px;
     }
  }
}
#triangle{
  width:0;
  height:0;
  border-top:$border transparent;
  border-bottom:$border transparent;
  border-left:$border orange;
  display:inline-block;
  position:fixed;
  right:8%;

}
.button{
  position:relative;
}
aside{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -200px;
  width: 200px;
  height: 100%;
  background: #fff;
  transition: 0.2s ease-out;
  z-index: 100;
}
#sidemenu{
  display:none;
}
#sidemenu:checked+aside{
  left:0;
}
#sidemenu:checked~main{
  margin-right:-200px;
  padding-left:200px;
}

$color:#29bde0;
@mixin box($width,$height,$background:#29bde0){
  width:$width;
  height:$height;
  background:$background;
}
body{
  margin:0;
  background-color:$color;
}
header{
  @include box(100%,120px);
  display:flex;
  justify-content: space-between;
  align-items: center;
  div{
    display:inline-block;
    font-size:30px;
    color:white;
  }
}
.rectangle{
  margin-left:10px;
}
.back{
  margin-right:10px;
}
.tip{
  @include box(100%,100px,#b9e9f5);
  position:relative;
  display:flex;
  align-items: center;
  justify-content: space-between;
  font-size:30px;
  color:#6a7b7f;
   span{
    margin-left:50px;
    font-size:17px;
    display:block;
  }
   img{
    margin-right:5px;
  }
}
.tri{
  width:0;
  height:0;
  position:absolute;
  top:6rem;
  left:10%;
  border-top:1.8rem solid #b9e9f5;
  border-right:0.9rem solid transparent;
  border-left:0.9rem solid transparent;
}
p{
  font-size:18px;
  margin-top:30px;
  margin-left:60px;
  color:white;
}
.rectangle1{
  @include box(20%,20vw,#f5c97b);
  color:#6a7b7f;
  margin:6%;
  display:inline-block;
  float:left;
  position:relative;
  border:2px white solid;
  .la{
    @include box(100%,25%,#83b09a);
    position:absolute;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:white;
  }
   .bot{
     @include box(100%,75%,#f5c97b);
    display:flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:0;
      span{
       color:#6a7b7f;
       font-size:20px;
       display:block;

     }
  }
   .sent{
    position:absolute;
    bottom:-6vw;
    right:0;
    width:100%;
  }
  .kill{
    display:none;
  }
  :hover .kill{
    display:block;
  }
}

footer{
  @include box(100%,20vw);
  position:fixed;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content: center;
}
button{
  @include box(70%,10vw,orange);
  font-size:20px;
  color:white;
}
.box{
  width:100%;
  height:160vw;
}

#music{
  background:url(orange.png) no-repeat;
  width:52px;
  height:52px;
  border:none;
  list-style-type:none;
}
audio{
  display:none;
}
#music{
  width:52px;
  height:52px;
  background:url(orange.png);
  border:none;
}

body{
  margin:0;
}
header{
  width:100%;
  height:10vw;
  background-color:#29bde0;
  display:flex;
  justify-content:center;
  align-items:center;
  border-bottom:2px solid #68cdd5;
  color:white;
  position:fixed;
  top:0;
}
.house{
  position:absolute;
  left:20px;
  width:5%;
}
.circle{
  position:absolute;
  right:20px;
  width:5%;
}
.logle{
  width:40%;
}
.top{
  margin-top:10vw;
  text-align: center;
}
.box{
  width:100%;
  background-color:#29bde0;

}
p{
  margin:0 10%;
  color:white;
}
.bottom{
  padding-bottom:15px;
}
h4{
  color:#ffc865;
  margin-left:10%;
  margin-right:10%;
}
ul{
  margin:0;
  border-bottom:2px solid #d3d3d3;
  padding:0;
  list-style-type:none;
  background-color:white;
}
li{
  list-style-type:none;
}
.one{
  margin-left:10%;
  font-size:15px;
}
.time{
  float:right;
  margin-right:10%;
  color:#d3d3d3;
}
.night{
  margin:0 10%;
  color:#d3d3d3;
}
.daytime{
  margin:0 10%;
  color:#d3d3d3;
}
.item{
  position:fixed;
  bottom: 0;
  width:100%;
  height:90px;
  background: rgba(153,223,240, 0.5);
}
.list{
  font-size:15px;
  color:white;
  background-color:#f66f6f;
  width:48%;
  height:60px;
  padding:0px;
  margin-top:10px;
  outline:none;
  border:2px solid #68cdd5;
  border-radius: 4px;
  margin-left:2%;
  display:inline-block;
  position: fixed;
  bottom: 2%;
  border:none;
}
.phone{
  font-size:15px;
  color:white;
  background-color:#fbb435;
  width:48%;
  height:60px;
  padding:0px;
  margin-top:10px;
  outline:none;
  border:2px solid #68cdd5;
  border-radius: 4px;
  margin-left:1%;
  display:inline-block;
  position: fixed;
  bottom: 2%;
  left: 50%;
  border:none;
}
.day {
  padding-bottom: 90px;
  background-color: #29bde0;
}

明天计划的事情：

1.开始任务14

2.继续sass学习

遇到的问题：暂无

收获：

学习了css命名规范后，感觉自己的css命名存在很大的问题，需要改善。