发表于： 2021-08-05 20:18:07

1 761

今天完成的事情：

提交了任务八，但是还在审核中，如有问题，明天继续修改。
明天计划的事情：

优化一下任务八，思考任务八的深度思考
遇到的问题：

友情链接一直实现不了，最后通过咨询师兄，原因是栅格布局写错了，正确如图：

收获：

CSS代码规范：

1. tab键用（必须）四个空格代替

　　因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你自己设定了tab键所占的位置长度）。

2. 每个样式属性后（必须）加 ";" 方便压缩工具"断句"。

3. Class命名中（禁止）出现大写字母，（必须）采用” - “对class中的字母分隔，如：

用"-"隔开比使用驼峰是更加清晰。
产品线-产品-模块-子模块，命名的时候也可以使用这种方式（@Artwl）

4. 空格的使用，以下规则（必须）执行：

选择器与 { 之前（必须）要有空格
属性名的 : 后（必须）要有空格
属性名的 : 前（禁止）加空格

一个原因是美观，其次IE 6存在一个bug，戳bug

5.多选择器规则之间（必须）换行

当样式针对多个选择器时每个选择器占一行

6. （禁止）将样式写为单行, 如

单行显示不好注释，不好备注，这应该是压缩工具的活儿~

7. （禁止）向 0 后添加单位, 如：

只是为了统一。记住，绿色字表强调，不表强制！

8. （禁止）使用css原生import

使用css原生import有很多弊端，比如会增加请求数等....

9. （推荐）属性的书写顺序, 举个例子:

定位相关, 常见的有：display position left top float 等
盒模型相关, 常见的有：width height margin padding border 等
其他属性

　按照这样的顺序书写可见提升浏览器渲染dom的性能

　　简单举个例子，网页中的图片，如果没有设置width和height，在图片载入之前，他所占的空间为0，但是当他加载完毕之后，那块为0的空间突然被撑开了，这样会导致，他下面的元素重新排列和渲染，造成重绘（repaint）和回流（reflow）。我们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流内还是外，具体在页面的哪个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其他的属性都是在这个固定的区域内渲染的，差不多就是这个意思吧~(@frec)

10. 小图片（必须）sprite 合并

11. （推荐）当编写针对特定html结构的样式时，使用元素名 + 类名

".a div"和".a div.b"，为什么后者好？如果需求有所变化，在".a"下有多加了一个div，试问，开始的样式是不是会影响后来的div啊~

12. （推荐）IE Hack List

当使用hack的时候想想能不能用更好的样式代替

13. （不推荐）ie使用filter,（ 禁止）使用expression

这里主要是效率问题，应该当格外注意，咱们要少用烧CPU的东西~

14. （禁止）使用行内（inline）样式

像这样的行内样式，最好用一个class代替。又如要隐藏某个元素，可以给他加一个class

尽量做到样式和结构分离~

15. （推荐）reset.css样式

推荐网站：http://www.cssreset.com/

16.（禁止）使用"*"来选择元素

这样写是没有必要的，一些元素在浏览器中默认有margin或padding值，但是只是部分元素，没有必要将所有元素的margin、padding值都置为0。

17. 链接的样式，（务必）按照这个顺序来书写

样式属性顺序

单个样式规则下的属性在书写时，应按功能进行分组，组之间需要有一个空行。
同时要以Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。

Positioning Model 布局方式、位置，相关属性包括：position, top, z-index, display, float等
Box Model 盒模型，相关属性包括：width, height, padding, margin，border,overflow
Typographic 文本排版，相关属性包括：font, line-height, text-align
Visual 视觉外观，相关属性包括：color, background, list-style, transform, animation

CSS选择器命名规则

分类式命名法(在前端组件化下尤为重要)
1. 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
2. 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册等
3. 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading等！
4. 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
5. 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}）
6. javascript(.j-)：.j-将被专用于JS获取节点，请勿使用.j-定义样式
不要使用 " _ " 下划线来命名css
能良好的区分javascript变量名
输入的时候少按一个shift键
浏览器兼容性问题（比如使用_tips的选择器命名，在IE6是无效的）
id采用驼峰式命名(不要乱用id)
scss中的变量、函数、混合、placeholder采用驼峰式命名
相同语义的不同类命名方法：
直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）
后代选择器：体-修饰符即可（例：.m-page .cut{}）注：后代选择器不要在页面布局中使用，因为污染的可能性较大；