前端之路之自述
缘起
年初的时候,我换了一个工作,之前的工作主要是撸Oracle的openjdk7
,或者V8
什么的源码。现在的工作主要是处理web开发方面的事情。web开发涉及到前后端,我负责后端,前端直接交给前端工程师去做,不过鉴于公司路由器有问题,都由我来解决的现状,涉及到前端的事自然也落到我的头上了。汗!
我的CSS
基础
这里说一个事情。有这么一个功能:一个搜索框,下面是一个很长的列表。点击搜索框,会到后台去搜索特定的内容,并返回前台。这个后台功能不复杂,现在看来,涉及到的前台显示——让搜索框和列表变的好看,其实也不是很复杂。但当时,一筹莫展啊!我的css基础嘛,为0.1
,知道一些CSS文本属性,其它的就不知道了。
怎么学习CSS、应该掌握什么CSS知识,怎么实现眼前的这个功能等等,我都不知道,而且这个不可以借鉴我之前的后端知识。用php做个比对,php我之前一次没有见过,但对于php,我知道我所不知道。我知道什么该知道,什么可以缓缓,不懂的原因、解决方法在那里,我都很清楚。我可以拿一本php权威指南之类的书籍,或者php编程之类的书籍,直接开始撸代码。但对于css不行,我不知道我不知道的。而且在学了css后,我才了解前端程序员的不容易:如果把后端程序员比喻成去解决开源软件的问题,那前端程序员就是去解决windows那闭源的软件问题。
初衷
我打算将我目前对css的学习记录下来。不知道谁说过,你只有教会某一样东西,你才能真正地学会某一样东西。嗯,这句话送给我。我有一句话送给你:没有教会的,只有学会的。
学而不思则罔 思而不学则殆
有一个简单的纲要:
-
CSS布局
- 浮动布局(float、浮动包含、浮动清除)
- 定位(静态定位、绝对定位、固定定位、相对定位等)
- flex布局(使用的比较广泛,尤其是移动端,目前的微信小程序就是使用的flex布局)
- grid布局(不会,因为目前浏览器支持比较少,属于实验性,暂时没有学的心情)
CSS控件实例学习
通过各个控件的实现,来学习CSS。重要的CSS属性介绍,比如
line-height
、background
等属性。
希望达到的目的:
- 看懂别人的CSS代码。
- 可以熟练地利用CSS框架,比如Bootstrap、weui等CSS框架。
- 可以不借助框架,实现自己的布局;控件的布局
- 可以自己实现特定的CSS控件。
CSS书籍推荐
我只推荐我看过,我认为还可以的。我听说是好书,但我没看过的,我就不推荐了!
CSS基础知识类:
- 《CSS设计指南》(第2遍在读)
- 《精通CSS:高级Web标准解决方案》(第二次读完background一节后,认为整本书独值得一读)
- 《CSS权威指南》(读的昏昏欲睡)
《CSS设计指南》我认为比较适合初学者,实例结合理论,有内涵,有一定深度。图书的厚度也合适。 我发现一点,前端的书籍,好像都不是太厚,我还没有见过500页向上的前端书籍。
《精通CSS:高级Web标准解决方案》这本书是我看被人推荐的,我刚拿到手,看了background一节,发现介绍的都是老的技术,以现在的效果,只要CSS3的一个属性就可以做到,还讲那个做什么。就放下了,知道后来开始撸CSS代码的时候,才发现这些技术随处可见,于是把它又捡起来,准备认真地通读全本书。
《CSS权威指南》这本书,我已经不止一次看到推荐了,比如《CSS设计指南》的作者也看过这本书。那为什么放在最后呢,因为难读。尤其是浮动一节,不太适合刚做CSS的同学们去读。嗯,对的,我就是第一次接触CSS时,直接看《CSS权威指南》的,效果不好,看完就忘了。
写出这本书的作者,起码对CSS规范很熟悉,甚至可能自己接触过浏览器对CSS特性的实现,否则不可能写出介绍CSS原理的书籍来。这本书甚至可以换个名字,叫《CSS原理》。但这本书不是从代码的角度去介绍CSS的,更多的是从规范的角度去写CSS。我觉得每一个前端开发者都应该读一下这本书。嗯,我没必要,我是后端程序员。
Bootstrap类:
- 《Bootstrap实战》李松峰翻译(读完)
- 《Packt Bootstrap By Example》(实践部分读完)
《Bootstrap实战》是国外的那一本,不是国内的那一本,要分清。自从看到这本,我就知道我可以去驾驭Bootstrap了,当然我现在也没能自由驾驭Bootstrap。不过,书写的真是好,属于深入浅出之类的书籍,书中还教你前端开发的一些好的实践,不错!
《Packt Bootstrap By Example》这本书就是教你学Bootstrap的,有些人可能很惊讶,这本书不教你Bootstrap,那教你什么。举个例子:《Bootstrap用户手册:设计响应式网站》这本书就不是教你Bootstrap的,起码在我眼里不是,它是卖钱的。
没有结论
先给个结论吧,好像我们学前端的东西,需要先看最终的显示效果一样。此结论,只表明我目前对CSS的一些使用看法,不代表最终结论:
- CSS和浏览器结合紧密,而浏览器与CSS的关系,繁杂、琐碎。需要花费特定的时间来学习,故CSS比较难学。
- CSS也比较好学,因为没有秘密,随时可以看到其代码,看到就能学到,类似于开源的概念。
- 需要看CSS代码,和后端一样。
- CSS比较有趣。
简书的自己的样式比较漂亮,为什么个人写作的CSS这么丑?