达到什么水平才能叫 html 和 css 基础夯实呢?

4,984 阅读6分钟
原文链接: www.zhihu.com

如题
比如说仔细看完css权威指南,要用到的时候有印象算什么水平?

做为一名从切页面转到写js的前端开发工程师,看到这道题目非常有感触啊。

先感性说一下,我还记得我第一年工作的时候,写css和html的时候听很high的歌,但是写js的时候,是绝对不敢听歌的。

再理性的说一下,我记得我当时的页面兼容程度是ie678和firefox,恩。。没错,那时候还没有chrome。。

盒模型什么的概念我也是几年前才知道的,我还记得我当时面试时,前端要求必须会div+css页面布局。

你看的没错,当时很多网站都是table布局的。。很多人对div这个概念都不太理解,更别说什么双飞翼,圣杯布局,9/12宫格了。

恩。。但是我记得我巅峰时期可以一口气切出兼容4个浏览器的页面,基本是一气呵成,不需要再单独调试,基本上是连着hack一起写完的。

要说现在达到什么水平才行,我总结几条吧,也不知道算不算落伍。

1,盒模型概念一定清楚,知道自己想要的布局到底该写多宽多高。
2,渲染模式要分清楚,怪异和标准,怎么转换,说白了也是盒模型表现的事。
3,不同浏览器的css hack怎么写,选择器的优先级弄明白怎么调整。
4,所有的html标签都知道语义,所有的tag attribute都知道什么含义,记住是所有,并且知道默认样式是什么,了解如何reset。
5,知道css3动画的所有细节,并且知道在不同浏览器下的差异,知道css media query和flex的细节和一些比例单位如em,rem,vm等用法,并且知道怎么用于实际的自适应布局。
6,知道如何做css性能优化和oocss,以及如何写出模块化的css。
7,知道不同浏览器的差异属性并且知道如何绕过不使用这些属性。
8,各种垂直居中的写法,相对,绝对,fixed还有float的各种用法。
9,对齐,各种垂直对齐,文本,图片,行内元素和块级元素等。
10,给你一份psd设计稿,写完css和html,去掉css,能保证页面不乱,依然按照语义可以默认样式正常显示文档。
11,对seo有了解,知道怎么让显示和文案同时存在页面,了解css icon fonts,svg,雪碧图等原理和用法。
12,写过简单的js,知道如何给js工程师预留结构和节点钩子,不随意使用id属性来做样式渲染。

暂时想到这么多,感觉算是一个基础的标准,这些都有所了解后再去学习js可能会更事半功倍。别人想到可以一起评论补充~,我很久不写css和html了。。。-。-

你能理解并尝试绕开它们的局限性的时候。

你能理解并尝试绕开它们的局限性的时候。

聪明的人做效果善于避开html局限性,基础扎实的人能利用html的局限性去实现效果。

聪明的人做效果善于避开html局限性,基础扎实的人能利用html的局限性去实现效果。

本小菜前来强答一波。。。
不同阶段对“基础”的理解可能不同,所以我倾向于分层来描述。
在我描述的“基础”为,只有具备了该能力才具备应对当前阶段的工作。
以下主要是根据自己个人经验整理所得,而且可能过于概括不太确切,望请更正补充。
1、前端入门
可实现:简单的PC布局
基础:常用的CSS2、HTML4知识(2/8定律中的2,类同),语义化,CSS命名使用规范。
此阶段中的问题大都可以在W3School中找到答案。
2、前端入行
可实现:稍复杂的布局
基础:浏览器兼容(如css reset,逐渐成为过去式的hack、css前缀等),布局技巧(如浮动、垂直居中,清除浮动等),模块化CSS增强复用性,常用的H5+CSS3知识,布局方式(自适应,瀑布流等),浏览器开发者工具中的DOM&CSS部分,常用优化技巧(如压缩,css sprite雪碧图等)。此部分中,js、JQuery的能力也应该具备了,此处忽略。
3、前端入行增强版
可实现:能切出的图都能跨浏览器实现,中小规模整站能够较为标准的完成
基础:能够查阅、理解规范(大多为英文,可配合各种大部头动物书帮助理解),对不常用的知识及细节也具备一定运用的能力(比如绝对定位与浮动的异同,z-index的各种鬼,文档流,较为全面的理解各类HTML标签及其语义,对HTML+CSS的知识面大多已经覆盖),开发者工具使用更加广泛(如对网络、资源等信息有一定的理解);最好对Bootstrap、Modernizr等框架的设计方案有一定理解,以具备自主写出更多通用组件(如自己的css reset)等,即对浏览器布局方案与浏览器兼容等有更深入全面的理解。本阶段开始注重2/8定律中的8。

至于那些大神已经可以利用这些基础出神入化的完成自己想做的并指导与规范他人了。。。。

写html和css代码就像写作文一样的时候,就算夯实了。

写html和css代码就像写作文一样的时候,就算夯实了。

毫無壓力的重構大部分頁面~

毫無壓力的重構大部分頁面~

知道什么是重点,我的答案很简单。

知道什么是重点,我的答案很简单。

能支持IE6 7 8 9 10。。。。。。。。。等

能支持IE6 7 8 9 10。。。。。。。。。等

《CSS权威指南》这本书我当年也很是迷信,觉得动物书都是圣经,其实现在看来这本书不过是很详细介绍了各个属性用法。所以我觉得成为前端高手和熟读《CSS权威指南》之间并没有多少必然联系。
我心中的前端高手的CSS水平应该是敢于拍板自己的解决方案就是最优的。不同类型的产品,不同规模的产品,都有自己的最优方案,我的任务就是找到并实现。
最后,我现在正在努力。