如何学习重要的css属性

乙醇 创建于 about 6 years 之前

最后更新: less than a minute 之前

阅读数: 598

如何学习重要的css属性

之前我写过一篇文章,大意是测试同学可以适当的学一学前端。前端技术里面,依赖相对较少的可能就是css了。

那如何学习css呢?作为一个半吊子的css的使用者,我发现其实大家经常使用到的css属性其实是有限的,能不能有什么办法来统计一下哪些属性是重要且必须掌握的呢?所以就萌发了统计重要的css属性的想法。

首先需要考虑的问题是,什么样的属性算是重要属性。一般来说,大家使用频率比较高的属性应该是重要且必须掌握的了。

后来的问题就是,如何统计这些属性的使用频率呢?其实可以从分析流行的css框架中的属性做起。先选定一些css框架,下载对应的css文件,然后从文件里拿到所有的属性,统计其对应的出现次数,频繁出镜的属性可以认为是重要的了。

有了思路,那就开始做吧。

下载css文件

我随便选择了一些css框架

  • twitter-bootstrap
  • bulma
  • foundation
  • materialize
  • pure
  • semantic-ui

上面这些框架没有个人喜好,就是根据github的star数随便选的。

下载的话用脚本去做就好了,不需要手工搞。

# 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的语法是这样的

.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文件的代码很简单。

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

微信公众号读者请点击阅读原文查看。

0

相关课程

mockito简明教程
图文
mockito简明教程

课程分类: 测试工具

mock工具

  • 已完结
  • 已更新7集
  • 最后更新时间: 2024-03-18 12:50:29

免费

查看详情
requests从入门到精通
图文
requests从入门到精通

课程分类: 测试工具 接口测试

python接口测试必会

  • 已完结
  • 已更新16集
  • 最后更新时间: 2024-03-18 12:54:40

免费

查看详情
Locust实用教程
图文
Locust实用教程

课程分类: 性能测试 测试工具

python语言实现的非常出色性能测试工具

  • 已完结
  • 已更新9集
  • 最后更新时间: 2024-03-18 12:24:59

免费

查看详情
TDD测试驱动开发教程
图文
TDD测试驱动开发教程

课程分类: 测试框架 软件测试基础

TDD其实并不神秘

  • 已完结
  • 已更新7集
  • 最后更新时间: 2024-03-18 11:53:22

免费

查看详情
软件测试基础教程
图文
软件测试基础教程

课程分类: 软件测试基础

转码和转行必备

  • 已完结
  • 已更新9集
  • 最后更新时间: 2024-03-18 11:40:05

免费

查看详情
软件测试入门教程
图文
软件测试入门教程

课程分类: 软件测试基础

新人如何转码到软件测试

  • 已完结
  • 已更新9集
  • 最后更新时间: 2024-03-17 11:07:23

免费

查看详情