何为学习瓶颈

学习到了一定的阶段,就很难继续提高水平的一种现象

这是很多人都正面对的,但同时自己并未意识到。

既然是瓶颈,那么一旦突破了,就是广阔天空!

你是否经常面对这样的情景:

遇到一个奇葩问题,着急地抓耳挠腮,苦逼地把觉得有可能的CSS属性一个个去试一下;你是否清楚自己还有很多东西要学。工作是很认真的,页面也是能写,前端书籍买了很多,

技术博客也会逛,然而自己并没有觉得有实质性的提高。

其实一些关键的突破性的知识点并不是你不能够搞明白,而是没有意识到要搞明白。

比如样式重置,我大概总结了前端开发者以下几种类型解决方案:

懵懂型:什么鬼?
简单粗暴型: * {margin:0; paddong:0;}
文艺型: body, table, ul, ol, dl, dd, dt... {margin:0; paddong:0;}
简约高效型: body, h1...dl, dd {margin: 0;}

很长一段时间我都是使用简单粗暴的解决办法,造成了很多没有必要的样式重写,而且破坏了UI的兼容性

后来也学着别人把标签分开来写,却被人指出dt标签默认是没有margin和padding的,

而且padding默认属性值仅极少标签(ol, ul)有,对这些标签重置样式只会增加页面渲染负荷;

于是对各个标签的属性有了深入的了解之后写,开始倾向于写后面简约高效型的样式,保证样式最精简,渲染最高效。

再思考几个问题:

  • 假设背景图片500px*500px,应用background-size:50%后,背景图片大小?
  • display:none和visibility:hidden的区别?
  • line-height在什么样的情况下会不起作用?
  • float为什么会让外部容器高度塌陷?
  • CSS选择器为什么会从右往左解析?

问题 1考察细节掌握;后面问题考察机制理解

也许不了解这些问题,我们依然能根据设计图成型页面完成工作,然而如果花点时间去了解,对CSS的底层表现有一定的理解与认识的时候,当我们遇到一些看似奇怪的问题,就能对症下药迎刃而解,面对一些奇葩需求的时候,也可以发挥我们的创造性思维,信手拈来各种解决方案。

另一方面,市场上前端那么多,只有对知识深度掌握,我们才有核心竞争力。

有些知识点并不是我们没有能力明白,二是没有意识到要去弄明白,意识远比技术本身更有价值,意识到瓶颈所在,问题就已经解决了一大半了。

举一个突破瓶颈的例子

郭靖师从6个师傅,武学根基好,踏实努力,但遇到稍微厉害点的小喽啰就打不赢了,师傅们着急对他进行特训,效果反而更不好。后来他遇到带给他人生的第一个转折点的马钰,教他使用巧力,修炼内功心法,武学生涯有了第一次突破。再后来,在名师好友(洪七公&黄蓉)的指导下,学会了降龙十八掌,名震江湖,又因为传奇的经历,跟周伯通学会了武学宝典《九阴真经》,武学造诣达到当时的顶峰。

我们每个人都可能经历像郭靖刚开始一样,拼命努力但收获平平,这时候 戒骄戒躁、查漏补缺,想比别人走得更远,更快突破瓶颈,就要,多看规范、多读技术博客、遇到问题多深入思考、要动手试验、对比、整理、分析分享,深入细节掌握,深入机制理解,如果有一个师傅来指点再好不过,他不一定很牛,但一定要合适,当然合适的标准每个人都不同。

一定不要闭门造车,去分享,去讨论,你会发现:准备分享内容以及在分享的过程中,会对你要分享的东西有更高一层次的思考,在讨论中,别人看似傻逼的建议也会让你发现你知识上的盲点。在成就一件事上,不能没有朋友,有朋友的同舟共济,事情才能更加的“出彩”。

纵观郭大侠的成长史,他也是学了赫赫有名的降龙十八掌和九阴真经才达到那么高的造诣的

所以我们也要学经典的东西,比如:《精通CSS》《CSS权威指南》《CSS CookBook》《CSS禅意花园》之类的经典著作。如果接受能力强,也可以直接看w3规范,毕竟是一手知识。

听别人说他们对w3规范的理解,可以帮助我们快速入门,然而别人的理解可能有一定的偏差,我们最后一定要形成自己的知识体系,系统、完整、能自圆自说。

学以致用也是很重要的,藏马(动漫《幽游白书》中的妖狐)说:‘提升格斗技巧最快的方式就是不断去战斗’。我们可以通过多做项目、github上follow别人的开源代码,模仿已有框架的API自己尝试实现,等等。只要想做,事情一定会找上你。

从我个人经验出发,最后劝大家一定要节制,知识重在平时积累,坚持、适度,循序渐进才是王道,毕竟冰冻三尺非一日之寒,再好吃的东西一顿猛吃也会厌倦。

另外,今天看到一篇小故事

一个人在公司干了25年,他每天用同样的方法做着同样的工作,每个月都领着同样的薪水。一天,他愤愤不平的决定要求老板给加薪及晋升。他对老板说:“毕竟,我已经有了25年的经验。”“亲爱的员工,”老板叹气说:“你没有25年的经验,你只是一个经验用了25年。”

这个故事告诉我们警惕舒适区,贵在创造,如果你觉得目前的工作没挑战性了,那很有可能进入了这个舒适区,一定要警惕。

这时候可以使用巧力来避免,比如:你习惯百分比布局,想要突破,可以尝试舍弃过往,接受新颖的架构,偏偏使用flex布局,总之,不要固执于一种已经习惯的解决方案,声明在于折腾,这样才能呢过不断进步 。

以上是我个人在学习与工作中的一些感悟,如果你正处在瓶颈期,我期望会对你有所帮助,我们一起进步。

我们最终的目的就是深入了解浏览器的机制、知道属性设计的初衷、属性之间如何互相影响,既知其然又知其所以然,代码优雅不罗嗦、渲染高效、遇到问题能快速定位、对症下药。与君共勉!

学习CSS的瓶颈的更多相关文章

  1. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  2. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  3. 20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章 分别是CSS架构目标和说说CSS学习中的瓶颈

    多讲一个,CSS全称是什么?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术 ...

  4. 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  5. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  6. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  7. 开始学习css

    今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...

  8. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  9. 如何深入学习CSS

    学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...

随机推荐

  1. Navicat Premium11.0.20破解版快速安装配置(附文件)

    Navicat Premium是当下非常好用的数据库管理软件,但是价格非常昂贵,并且还有某些小bug,感觉3000+的人民币 与软件本身的价值还是不相称.下面是破解安装流程安装过程是在MAC 10.1 ...

  2. ASP和ASP.NET发送邮件笔记

    这两天因公司网站邮件发不出去,然后研究了在asp网站发送邮件和在asp.net网站发送邮件的代码,把碰到的问题这里记录一下. 1.先说在asp.net中发送邮件吧, 刚开始只有126邮箱可以发出邮件, ...

  3. 【代码笔记】iOS-scrollerView里多个tableView加搜索框

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "customCell.h&qu ...

  4. view渐变色,透明度渐变

    1 功能描述 开发中经常遇到这样的需求:view2显示在view1上面,透过view2可以渐渐的看到view1.效果如图1所示:view1是一个imageView,view2是一个普通view.vie ...

  5. 详解 Spotlight on Unix 监控Linux服务器

    1.安装 Spotlight on Unix 下载地址:http://yunpan.cn/QNWyEEvNS4xc9  访问密码 1c7d 傻瓜安装 2.配置spotlight登陆用户,注意spotl ...

  6. 试用 Nexus OSS 3.0 的docker仓库 (一)

    Nexus 3.0 可以创建三种docker仓库: 1. docker (proxy)      代理和缓存远程仓库 ,只能pull 2. docker (hosted)    托管仓库 ,私有仓库, ...

  7. substring -----截取字符串

    var str = "0123456789"; substring alert(str.substring(0));------------"0123456789&quo ...

  8. [Linux 性能检测工具]IOSTAT

    IOSTAT NAME:          Iostat, 报告CPU的统计,和 I/O的统计. 语法: iostat  [ -c ] [ -d ] [ -N ] [ -n ] [ -h ] [ -k ...

  9. MYSQL管理之主从同步管理

    原文地址:MYSQL管理之主从同步管理 作者:飞鸿无痕 MYSQL管理之主从同步管理 MYSQL主从同步架构是目前使用最多的数据库架构之一,尤其是负载比较大的网站,因此对于主从同步的管理也就显得非常重 ...

  10. 学会使用简单的 MySQL 常用操作

    一.MySQL 数据库的基本安装 # yum 安装 mysql 版本:5.1.73 [root@mysql ~]# yum install -y mysql-server mysql # 启动 MyS ...