聊聊怎么学css吧

326 阅读3分钟

这是我参与更文挑战的第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的动效实现。