CSS
之前我写css的时候，刻意使用了scss来写，因为我想他提供的嵌套功能，很有效的避免css类名冲突的问题，比如说
.main {
.header {
.btn {
color: blue;
}
}
.footer {
.btn {
color: red;
}
}
}
我这里在header和footer里面同时使用了btn这个类，但是并没有产生类名冲突，这是因为生成的btn类被分别限制在header和footer里面，所以我觉得这是一个很方便的功能。最近也在写react，之所以不用css module来避免这个问题，主要是因为我觉得通过有效的命名规范，就可以避免这个问题了，而且引入了css module，在jsx里面写类名，会变得非常麻烦和啰嗦，同时，虽然避免了命名冲突的问题，但是同样会丧失css的灵活性。
但是直到前几天，我遇到了一个麻烦，开始怀疑使用scss写嵌套css规则的优势。
先说这样嵌套写的问题吧。主要问题就是，他会让人写出层级非常非常深的css，比如上面的scss生成的.main .header .btn,如果再多来几个类，那层级就更深了。
前几天遇到的问题大概是这样的：
.main {
.header {
.search-bar {
.btn-wrapper {
.btn {
color: blue;
}
}
}
}
}
假如我需要在search-bar被hover的时候,改变btn类的color的颜色,我该怎么办?
我一开始sbb的写出下面的代码
.main {
.header {
.search-bar {
.btn-wrapper {
.btn {
color: blue;
}
}
&:hover {
.btn {
color: red;
}
}
}
}
}
结果是效果没有出来,为什么呢?
因为生成的代码是下面这样的
.main .header .search-bar .btn-wrapper .btn {
color: blue;
}
.main .header .search-bar:hover .btn {
color: red;
}
很明显,有hover这段的代码,权重不够.问题是出现在我添加hover效果的时候,没有完整的把css的嵌套层级写一边,我应该像下面这样写:
&:hover {
.btn-wrapper {
.btn {
color: red;
}
}
}
问题是解决了,但是还是面临老问题,为了覆盖一个css,我需要写出一个完成的css层级,一旦css的层级很复杂,那么写出的代码就会很臃肿,第二个解决办法,就是使用!important来增加权重.
&:hover {
.btn {
color: red !important;
}
}
事实上,几天前我就是这么处理的,但是我觉得这样非常不好,所以,我开始考虑是不是不应该用scss来解决这个问题,于是,我把目光投向了之前就了解过,但是没有使用过的BEM命名方法.
BEM具体的写法我就不写出来了,对于我来说,优点就是不再写出层级很深的scss,但是依旧能保证类名不冲突,他那些概念对我来说,学习成本也不是很高,我也愿意去接受,
不过缺点就是写出的类名比较长,编写的时候就会麻烦的,也考虑过使用网上提供的,通过scss的mixin来解决这个问题,但是写出来的代码又变成了满屏的@include,所以,再三权衡下,我还是放弃采用.
js
今天看了一下,推荐的js代码风格,结果就找到了airebnb,看了一遍文档,感觉还是很不错的,于是今晚就在自己的项目里面实践了一次,当然,他里面的规则也有我不认可的.比较突出的就是该不该用下划线来表示私有.
比如说
let person = {
_name: 'nani'
}
airbnb给出不使用的理由是,因为js里面并没有真正意义上的私有,而且,这回让人误以为修改以下划线开头的属性不会有啥问题(我并不知道为什么会这样认为).
但是我觉得使用下划线非常有帮助,原因就是
-
下划线默认是私有的,在webstorm里面,以下划线开头的属性会被标记为私有,能提供更加智能的代码提示
-
以下划线开头的属性是私有的,虽然仍旧能被访问到,但是我觉得它透露了一个信息,那就是"我已经很明确的告诉你这个属性是私有的了,如果你还是想要访问修改他.那么程序如果出错了,后果自负"
网友评论