# 如何学习重要的css属性 之前我写过一篇文章，大意是测试同学可以适当的学一学前端。前端技术里面，依赖相对较少的可能就是css了。 那如何学习css呢？作为一个半吊子的css的使用者，我发现其实大家经常使用到的css属性其实是有限的，能不能有什么办法来统计一下哪些属性是重要且必须掌握的呢？所以就萌发了统计重要的css属性的想法。 首先需要考虑的问题是，什么样的属性算是重要属性。一般来说，大家使用频率比较高的属性应该是重要且必须掌握的了。 后来的问题就是，如何统计这些属性的使用频率呢？其实可以从分析流行的css框架中的属性做起。先选定一些css框架，下载对应的css文件，然后从文件里拿到所有的属性，统计其对应的出现次数，频繁出镜的属性可以认为是重要的了。 有了思路，那就开始做吧。 ### 下载css文件 我随便选择了一些css框架 * twitter-bootstrap * bulma * foundation * materialize * pure * semantic-ui 上面这些框架没有个人喜好，就是根据github的star数随便选的。 下载的话用脚本去做就好了，不需要手工搞。 ```shell # https://cdnjs.com/libraries/twitter-bootstrap wget https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css # https://cdnjs.com/libraries/bulma wget https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css # https://cdnjs.com/libraries/foundation wget https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css # https://cdnjs.com/libraries/materialize wget https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css # https://cdnjs.com/libraries/pure wget https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure.css # https://cdnjs.com/libraries/semantic-ui wget https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css ``` ### 统计每个css属性出现的次数 一般来说，css的语法是这样的 ```css .kls { width: 100%; } ``` 我们可以发现，一般来说，有```;```出现的行就是css属性出现的行，所以第一步就是过滤出所有包含```;```的行，那就用```grep```吧。 找到所有包含;号的行之后，我们还需要使用```:```来切割该行，输出第1列，也就是属性名称列。这里用的是```cut```。 拿到属性名称之后，做一些梳理，比如去掉开头的空格之类的，再使用```sort + uniq```，排序加去重。 完整的shell命令如下 ``` cat *.css | grep ';' | tr -d ' ' | cut -d ':' -f 1 | sort | grep -v "^-" | grep -v "^/"| grep -v "^\."| grep -v "^\*"|grep -v "^@"| grep -v "^\s"|uniq -c | sort -r > all.txt ``` 这时候就拿到了临时输出文件all.txt ``` head all.txt 248 color 248 background-color 237 display 134 margin-left 114 border-color 89 padding 85 max-width 85 margin-bottom 81 width 80 flex ``` 数字代表css属性出现的次数。 ### 输出markdown文件 github可以直接浏览markdown文件，用html的方式，因为每个属性大家可能都需要去搜索引擎里搜索具体用法，为了简单专业起见，我用直接拼出了每个属性再mdn中对应的地址，方便大家学习。 输出markdown文件的代码很简单。 ```python file_name = 'all.txt' with open(file_name) as f: content = f.read() for line in content.split("\n"): times_and_attr = line.strip().split(' ') if len(times_and_attr) == 2: print('* %s [%s](https://developer.mozilla.org/en-US/docs/Web/CSS/%s)' %(times_and_attr[0], times_and_attr[1], times_and_attr[1])) ``` 用python代码去解析all.txt，然后把输出重定向到markdown文件。 ``` python make_doc.py > reference.md ``` ### 总体流程 ``` ./download.sh # 下载css文件 ./attr.sh *.css > all.txt # 输出临时文件 python make_doc.py > reference.md # 创建md文件 ``` ### 最终效果 希望对大家有所帮助。 另外一些使用频率不高的css属性其实也非常重要。比如box-sizing，在统计结果中只出现了3次，但实际上却是相当重要的属性。 [reference](https://github.com/easonhan007/important_css_attributes/blob/master/reference.md) 微信公众号读者请点击**阅读原文**查看。 原始封面 ![课程图片](https://images.unsplash.com/photo-1459695452562-46cc57bef5f6?w=300)