从建筑工程到前端工程

原创 Easile 随笔 html_css 242阅读 2018-03-18 00:34:29 举报

行内的人都知道,前端这个职位具有极易可替补性,就我所在的公司而言,从运维、后台到测试,甚至UI设计,都可以写几行所谓的前端代码。但是一个专职前端写出来的代码,如果和这些“业余人士”的品质在同一个水准上,那么就没有意义了。如何去体现出HTML的结构性、CSS的层叠性,以及在编写web级的JavaScript时有没有充分利用到前两者,甚至取而代之,都是需要在平常的工作和学习中去探究的。

本人由建筑工程设计转至web前端已两年有余,“三百六十五行,行行都相通”,谨以此文分享一下我从建筑学中获取到的HTML和CSS的编写思路,以及一些常用布局和技巧性写法,供初学者参考。关于JavaScript部分,尚未获得较好心得,故不在此造次。对文中前端部分观点持不同看法,或者有更优方案的前端大佬,还望不吝赐教;对于建筑学知识的偏差,还望“前同行”的某工们多多海涵。

那就直接进入HTML部分,话不多说,上图:

上面是一张简化过后的建筑平面图,大家平常应该有机会见到,接下来我们就从这张图去寻找HTML的设计思路。

整个黑色的区域,可以看做是浏览器的视口,也就是web中的body区域,这个应该很好理解,不多赘述。

我们应该都见过,在施工的前期有一个准备工作叫作“打围”,用以规划场地和保护行人,也就是图中最外层的白色虚线部分my_page区域。

再往里,就到了建筑的主体部分,就框架结构的建筑而言,底部都会有“地圈梁”用以承重和加强整体性,如图中的page_core区域;而附属建筑(锅炉房、烟囱等)的建筑层数一般都会与主体不一致,于是它们往往会拥有自己独立的基础,因此,web的侧边广告、弹窗等可能需要覆盖于页面之上的结构就需要从主要内容区域分离出来,即图中的aside_ad应该与page_core同级,否则可能会导致定位时无论如何调整z-index都无法完全覆盖某个定位的元素(z-index在同级直接比较才有意义:父元素层级为1的子元素,永远无法高于其父元素的兄弟元素中层级为2中的任何元素,就好比身在一楼,最高也只能触及到一楼的天花板,不可能到达二楼)。

因此,为保证HTML结构的整体性,我们在拿到网页设计图时,应细致分析其构造,从最外部开始向内部延伸,而不要采取从上至下或者从左往右的方式进行书写。比如一张设计图的构造为头部、内容、尾部,那么一开始就应有这样的结构:

接着,再着手头部内容的书写,如头部为左侧logo,右侧菜单:

依次类推,循环往复地将HTML进行扩展。

在编写整站多个页面时,仅使用一个class或id在最外层控制区分,不要直接在需要覆盖或添加样式的标签上追加class或id,以避免限制越写越多,控制越写越乱。

1、可直接在body或最外层div上进行区分:

2、也可直接在“转折”的地方进行区分:

那么房子修建完了,就该到了装饰装修的工作,而CSS就在web工程中就扮演着装修的角色,与此同时还担任着布局的重任。就我而言,习惯于把代码分为“布局代码”和“内容代码”,从而使两者都能得到复用。

什么叫布局呢,简单的来理解,就是屋子里各个房间的隔墙;而内容则是每个房间里面的沙发、桌椅以及家具等。

应用到前端代码的编写当中,我们在审图的时候应该首先着眼于每个区域的“块儿”,格局出来以后才是往里面添加物件。这些“块儿”相比我们的房间,优越性体现在其大小可以由内容撑开,因此在书写CSS的过程中,应当尽量避免“定高定宽”的写法,让“布局”可以自由发挥,更符合“流式布局”的思想。讲到这里,可能会觉得太抽象了,也需要在学习的过程中自己去体会,那么我们直接上代码。

在写页面的过程中,我们经常会遇到这类布局,文字分立在两侧:

一般情况下,我们都是采取的左右浮动的形式去解决这个问题。但是遇到刁钻的客户时,需求变更在web开发过程中是常有的事情,比如这里就可能产生上/中/下三种对齐方式,那么我们该怎样去灵活地处理这个布局呢?

1、我们都知道,"text-align: center;" 可以时文字和图片在布局内居中,准确的来说使“行内块”居中。因此就可以联想到可以使文字分散对齐的"text-align: justify;",然后配合"vertical: top/middle/bottom;"属性就可完成对齐方式的控制。当然,在解析机制中"text-align: justify;"是不会让最后一行分散对齐的,于是就可以加上":after"伪元素去补足最后一行,"inline-block"带来的底部占位,则可用父元素的"margin-bootm: 负值"来消除。代码如下:

2、根据上面的思路,就又可以想到"vertical-align",在另一种场景中的运用:"table-cell",原理上差不多,并且代码看起来会更清晰,但是这里就会体现出前面提到的“布局代码”(下面代码中的ul > li),不然两块文字将占满整个区域,a标签的点击范围会很尴尬。代码如下:

3、采取定位的方式,但这样有个弊端:必须选取高度较小的元素进行定位,否则父元素的内容会溢出。定位在很多初学者都是有点难以理解的部分,因为时常会发生“定位元素失踪”的惨案。但大家只需要牢记“子绝父相”四个字,即子元素要"absolute"的时候,一定要将它的父元素"relative"。当然在遇到有些特殊情况的时候,也有跨级定位的用法,但一般不建议使用。代码如下:

我们通常会强调HTML的一致性、可循环性,事实上在CSS中也应当尽量保持同级元素样式一致,即少作特殊化处理。

上面这种布局,也是我们经常能碰到的,我见过最多的写法就是每个灰色区域各占19%,margin-right: 1.25%,nth-child(5n+5){margin-right: 0;},嗯,数学挺不错的。我自己刚入门的时候就更简单粗暴了,拿出计算器啪嗒啪嗒'px'就算出来了,这样虽说也写出来了,但总感觉哪里不对劲。那么现在作为经历了30多个完整项目的“页面仔”,给大家分享一个通用的写法:

从上面的代码可以看出,其核心还是本着“布局”与“内容”分离,这里的"ul.float_list > li"只参与了布局,于是我们只需要给"li"相应的宽度来控制每行的个数,以及padding来隔开每块内容。到这里我们会发现:由于这个padding的存在,导致了内容边缘无法与".area_ctrl"对齐,那么我们要移除四周的padding吗?当然不是,也难以做到。所以采取另一种思路:增大父元素的空间,于是就有了.list_box{margin: -10px;},从而底下写起响应式来也就得心应手了,也不会再抱怨"flex"的兼容性问题了。当然,这里还有个知识点,不知道大家有没有发现灰色的区域一直是正方形,那么以后要适配不同屏幕下的圆形、椭圆、胶囊形还需要依赖js写resize事件吗?请大家自行查看代码进行分析。

在常见的需求中,有这样一种列表:左侧是不定长度的文字,右侧紧跟时间或者作者之类的短文字,且要纵向对齐。如下图:

这种情况下,不管是浮动、定位都不管用了,因为左侧的宽度不固定,并且右侧需要紧紧跟随,那么就要动用js去动态计算宽度了吗?当然不!首先,根据“弹性”和“纵向对齐”这两个需求我们就能想到这里需要使用table,那么如何去满足“紧紧跟随”呢?在非'table-layout: fixed;'模式下,td的宽度会自然分配,不会因为我们写多少就是多少。所以此时左侧的td宽度应当尽量小,故将其宽度设置为1px;而它里面的文字又需要将其撑开,因此文字不能换行,为保险起见还需设置最大宽以及溢出截取。代码如下:

接下来讲一下tab切换一种技巧性写法,首先并不推荐这种写法,因为对结构要求和代码的严谨性比较高,主要为发散一下思维,培养敢于探究的精神。大家都知道单选框(input[type="radio"])一次只能选择一个,而label有个"for"属性可以根据id绑定到input,因此我们就可以通过点击label来控制单选框的切换,而单选框切换(:chekced)后又可以关联选择器进而控制label以及其他元素的状态。思路如此,代码如下:

从上面的代码我们也可以看出选择器的使用,在CSS的编写中占据着举足轻重的地位,通过对各种选择器的熟练使用往往可以创造出很可观的效果。除此之外,我们还能想象出复选框(input[type="checkbox"])的应用场景,比如可以替换掉我们常写的jQuery当中的toggleClass方法,这里就不作举例了,如有兴趣自行模拟。

最后,我想讲一下border的构成,之前遇到过一个刚入行的前端朋友,我让他写一个三角形出来,于是乎,一波操作猛如虎:点开浏览器 → 输入某度地址 → 搜索关键字找到答案 → CV收工。我说这么一个案例是想表达什么呢,虽然我们通常需要的代码,无论前后台都能够在网上搜索出来,某度不行就某虎,某虎再不行就某歌,但那始终都是属于别人的东西,要想在各种需求下迅速从自己的大脑中检索出最优方案,就必须去深入了解每一行代码的解析和算法。

上图中红、黄、蓝、绿四种颜色的梯形就是border四边的组成部分,对于不是太了解的朋友来说,可能跟想象中不太一样。那么三角形是怎么通过border写出来的呢?当中间的正方形的边长不断变短,梯形的上底也随之变短最后变为0,那么就构成了等腰三角形,将四种颜色的三角形进行组合就能变成多种形状:

前端所需要掌握知识点多而杂,但最终基本功还是HTML、CSS、JS三大块,我写这篇文章的目的不在于展示那么几个案例,而是希望所有的前端初学者都能够摒弃浮躁,脚踏实地走好每一步,然后向更高更深的层次去发展。所谓框架都只是用来追求工作效率的工具,HTML结构、CSS设计好了你还看得起bootstrap吗?原生js写得炉火纯青了你还需要jQuery吗?愿我们都能在有限的语法中挖掘无限的写法,将每一个知识点发挥得淋漓尽致,每天都有新发现。

评论 ( 5 )
最新评论
前端大队长 2018-03-20 10:57:04 5F

Easile 3F 2018-03-18 15:41:15 4F

其实是一样的,同样都是搬砖

糯米不是饭丶 2018-03-18 14:17:52 3F

楼主,我要走你的反方向了。。。从前端工程到建筑工程

Easile 1F 2018-03-18 10:35:26 2F

这个问题可就太难了,冲动的惩罚,便是天天敲代码

lawrence 2018-03-18 06:07:19 1F

楼主为何不干建筑了呢?