【今天完成的事情】

基本上都是在做任务:学习了BEM，看了一下原子类的讨论，看了一下重置css的分享。代码就只是写了个reset和颜色的变量。

【明天计划的事情】

继续做任务

【遇到的问题】

1、今天花了大量时间一直在琢磨这个BEM的事情。

认真再去读了BEM的介绍，还不是很能理解。为什么要用两条下划线和两条横杠啊？而且这块和元素和修饰到底是个什么意思？

然后再翻W3Cplus的一些教程，有一篇文章很适合用来理解（读了这篇文章我才发现前面好像打开了假的官网）：

《BEM的定义》https://www.w3cplus.com/css/bem-definitions.html

看到文章举的例子就发现了这不就是bootstrap里那些选择器的命名嘛，之前只是关注引用这些选择器最后页面的呈现状态，这回知道为什么要这么命名和设置选择器了。

但是文章讲的，我可能在css上设置class命名的时候知道怎么用，那sass里我想多用一些mixin该怎么做呢？

然后就看到《如何更好地使用BEM》https://www.w3cplus.com/preprocessor/getting-sass-y-with-bem.html

然后按照文章的方法，试着把页面分块，分元素，加修饰，不熟，有些无从下手，只做了一点点，就只知道页眉，页脚，菜单，导航栏，就不会了。明天继续琢磨。

2、在命名颜色变量的时候出现了困惑，这个设计图里灰色实在是太多了，我用完grey，light-grey，dark-grey之后就不知道该怎么命名了。一开始想的时候难道这个也用BEM命名吗？边框的灰色，背景的灰色，字体的灰色，不对吧，BEM应该是选择器的名吧。

然后看到一篇文章《抽像命名Sass变量》https://www.w3cplus.com/preprocessor/better-sass-variables.html

推荐了个网站，只要输入了十六进制的颜色它就会提供一个命名，太好了。http://chir.ag/projects/name-that-color/#000000

但是这中间又有个问题，就是我觉得这个页面吧有的颜色跟我预想的不大一样。比如设计图里有些字体的颜色是#515151，这“看起来”就是“黑色”，虽然我知道实际上黑色是#000000，这页面里也没有别的颜色“像”是黑色的了。但是我想了想，觉着还是不要按照自己的感觉吧，就遵守别人提供整理的一整套颜色命名方案吧。就是用的时候会忘记，要倒回去看一看，那这跟设置不设置颜色名有什么区别呢。不过有含义的名字还是比数字好记一点点啦。而且还觉得长见识了，这个色竟然是银色，那个色竟然是金色沙子的色，还有什么鹅卵石的色，还有地下管道的色，还有叫冰冷的色，还有蜜糖的色等等，这些命名真是太神奇了。

灰色解决之后，发现几乎每个地方都要取一下色，肉眼上看到的一样，其实不一样，哎呀，觉着都是“黑色”的嘛，后来一取色发现不一样，分别是#565656、#515151、#464646。虽然可能有些费劲，但是还是忠于设计图吧。

取色的时候还是发现了，这个颜色的命名似乎是有一定区间的。比如silver这个色，我取rgb（190，190，190）跟rgb（201，201，201）都是这个命名。

（另，我对字体的取色是放大设计图后，以字体最中间部分的像素为准）

3、关于字体大小的变量。

在看到知乎上有人说仿照bootstrap那样用primary，x-small，small，large，xlarge这样写，primary设置一个中间数，比如16px，然后这些对应的程度就乘以不同的百分比或者倍数来得到对应的字体大小。

然后我就把设计图的字体大小记录下来，一共有12个值。然后我就想难道要像衣服大小那样，加小，小，中码，大码，加大，加加大，加加加大，写够12个字体大小值吗？xxs，xs，xxxxl这样吗（这点请求师兄解答一下）

4、关于resetting 和 normalizing 之间有什么区别？

今天只是看了reset，就跟刚接触css的时候，会用到*{样式}来设置个全局样式，这其实也是个reset，但是这样没有必要，会浪费资源。因为有的东西压根用不上，去重置他也没什么意义。所以只要拿出几个需要重置的重置一下就好了，不用全都重置。

normalize.css还没看，只是扫了几眼，明天学一下。

【收获】

BEM里两条下划线是连的元素Element（注意一下，此元素非彼元素，不是HTML里的那个元素），两条横杠是连的修饰符Modifier，为什么都要用两条，是让人自定义名称的时候可以用一条，比如说block__element_name--modifier-name。

块吧，理解成一个个模块，元素吧，理解成模块里的一个个组件，修饰吧，理解成不同的状态。

比如，一个房子，卧室，书房，厨房，洗手间，阳台是一个个的块，那组成这些块有很多个组件，门啊，窗户啊，床啊，书柜，灯啊等等。那他们可能有不同的状态，灯亮了，灯灭了。关门开门等等。

（这样理解不知道对不对）

在知乎上有些说法是这个名称很长，也可以自己定义一些别的符号，只要这种自定义的符号设计符合BEM的理念，然后团队合作统一使用也可以。用BEM主要是通过这种命名的方式来划分模块和组件和组件的状态，就更好地去管理和维护项目。