聊聊怎么学css吧

这是我参与更文挑战的第29天，活动详情查看： 更文挑战

卖个关子

算不上很频繁吧，但是还是尝尝会看到很多吐槽说“前端超级简单的，就是css太麻烦了”，HTML虽然简单，但是太枯燥了吧，诸如此类的话语，其实从自学到如今，别人吐槽的这些也确实深有体会。

但是有时候，有些工作还是不得不做的，所以得寻求一些苦中作乐的方式来降低枯燥度，找到HTML和css的快乐啊。

每个人看到快乐的角度是不同的，或者本身就是不喜欢，也很难说找到兴奋点了。

编辑器和插件

对于初入门的新手而言，一个好的编辑器和插件是必不可少的，虽然看起来和学习没关联，但是在安静的图书馆学习和在闹市中学习，是有着本质的差别的。

就像有的人喜欢听歌，有的人喜欢安静的环境。

这里插一句，新手尽量不要带着耳机学习，虽然满足了听歌的欲望，但是会被音乐瓜分精力。

如果实在想要安静的氛围，推荐带耳塞。

编辑器的话，真心推荐vscode，其次是HBuilderX等编辑器也不是不好，对前端开发的支持比较友好，其他的编辑器也不是不行，但是对于新手而言不是体量过大就是插件安装不方便。

HBuilderX完整版到是不需要安装插件，但是安装包有点点大，不过还好。

vscode装插件比较轻松，网上也有许多插件推荐，可以安装一些自己感兴趣的， 但是切记不要装太多了。

主题来了

HTML

前面聊聊了初学者，给初学者一点点小小的建议，接下来谈谈有一些年份的前端小伙伴们，学习或者使用HTML+css的经验吧。

原生HTML部分单写页面我也没辙，只能老老实实的写，但是可以考虑下看看emmet的语法，和css一样的选择器，快速生成重复代码。

或者干脆来一波pug(类似css预编译器一样的东西)，对于重复的代码部分有着很好的效率提升。

CSS

至于css吗，一样的， 优先推荐scss、其次是sass和less，scss和sass的语法有点区别，scss更接地气一点。

使用预编译器要注意了，不仅仅是为了层级嵌套什么的更方便，更主要的是@mixin,@for,@if，变量这些是真的香，虽然需要一点点学习成本，但是对于从编程语言过来的小伙伴，或者日后想要深入学习的小伙伴都有着不小的好处。

效率提升这一块儿也是杠杠滴。

如果是初学的小伙伴，建议量力而行，首次接触程序的小伙伴，看着有点吃力实属正常，切莫妄自菲薄。

推荐一点好东西

CSS-Inspiration

网站以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。

CSS Tricks

一些实用的css技巧

Spinkit

一些css的动效实现。