欲练JS,必先攻CSS——前端修行之路

转载 2018年01月01日 00:00:00

(点击上方公众号,可快速关注)

来源:子慕大诗人  

http://www.cnblogs.com/1wen/p/6839779.html


今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助。

个人的css历史

说说自己的css学习的历史,12年,当时是老师手把手1对1教我div+float的固定布局,所有元素全部用float,做了学生会网站的全部前端页面,因为有段时间学PS比较多,也是自己做的UI,很丑,老师说第一次做成这样很不错了,那时老师就觉得我有做前端的天赋,我就是从这个时候开始接触前端的。毕业设计自己一个人做了一个全栈的web,做完整个毕业设计后,我就决定出来要做前端,感觉自己更喜欢。14年出来工作,那时候还不会用什么less,就是直接写css,那时候主要还是写固定布局的pc页面,14年底自己在项目里折腾,用了一下JQmobile,超级难用。15年做一个移动端项目的时候,调研了几个css库,学习了bootstrap和它部分源码,还用到了webfont,使用流式布局这一次提升很大再后来学习了rem,并用到了项目中,至此我的css就到了一个缓慢成长期,或者说就没有特意学习css了。

干货

下面来说一些,我平时比较注意的细节、技术点,和一些大家可能不是很熟悉的知识点。

1.box-sizing: border-box

box-sizing主要有两个值content-box和border-box,先看下官方的解释:

640?wx_fmt=png&wxfrom=5&wx_lazy=1

 

通俗一点来说,默认情况下,padding和border是会额外占据空间的,假如元素宽是10px,如果设置了1px border边框,实际的宽就是12px,padding同理。那么这样会导致,布局的宽高不好控制,计算也特别麻烦。所以我们会给全局的元素用上border-box, 只要设置了宽高,那么border和padding无论怎么变化,元素的宽高都不会变,这样方便布局和计算。

0?wx_fmt=png

 

2.左边固定 右边自适应

在布局的时候,比如一些列表页,常常左边是一个固定大小的缩略图,右边剩余部分展示标题,如图

0?wx_fmt=png

那我们就叫左边固定右边自适应的布局吧,我的方法 100%宽的div用padding-left把左边图片的位置留出来,div元素内容的部分就是标题,图片绝对定位到padding-left区域,这样就实现了左固定右自适应,(前提是box-sizing必须是border-box,否则padding加上100%宽会超出屏幕宽度),大致代码如下:

0?wx_fmt=png

 

3.伪类的 content attr

伪类before,after的content属性,是用来插入内容的,我们可以通过attr 传入一个当前元素的属性名,把属性值,载入进伪类内容,这个是一种写法,但实际应用场景可能并不多,就当了解一下吧

0?wx_fmt=png

 

4.中文符号居中效果

对于动态输出文字可以不用在意,某些页面可能会有类似提示文案的地方,用英文标点符号,对于居中效果比较友好。

 0?wx_fmt=png

 

5.元素的上下间距

布局的时候从上往下开始写页面,一般都是写下一个的元素margin-top来决定和上一个元素的间距,那么就尽量不要又是写margin-top又是写margin-bottom,如果混着用,后期不好维护,比如某一块区域需要摞位置,或者是一个组件可能会被很多地方共用,混着写的话后期在改的时候,可能会麻烦一点,这里导致的问题可以说不痛不痒,但是不管是js还是css,注重细节并养成好的习惯,是代码能力的一种体现。

0?wx_fmt=png

 

6.字体颜色透明

有时候设计师,在配置字体颜色的时候可能用透明的百分比,来设置几种不同的颜色,比如主色是#000,浅灰色#000 80%的透明度,这种情况下不建议web写透明度,而是让设计师给到对应的颜色值,因为透明色会根据背景的不同,比如现在看到的这种情况,这样扩展性就比较差。

0?wx_fmt=png

 0?wx_fmt=png

 

7.命名

命名是一个让人最纠结的事情,先看第一种,这样命名的更详细可以一目了然的知道当前类的意思,但是长度比较长,增加代码量。

0?wx_fmt=png

 

第二种使用缩略命名,会使代码更短,写起来更快,但是不易读。

 0?wx_fmt=png

 

如果用缩略命名,可以约定文档,有约定和熟悉成本,但是熟悉以后更高效,类的命名也会变得更规范和统一


0?wx_fmt=png

 

8. 0.5px边框的理解误区

我之前写边框的时候就发现,只要让边框的颜色更淡,边框看起来就更细,所以当设计师问我为什么边框看起来比较粗的时候,我都告诉他们颜色调浅一点就好了,这个技巧我一直在实际使用。网上有博客说通过css3 transform的缩放scale 50%,可以实现0.5px边框,我一直很奇怪,1px实际是物理的最小单位,怎么可能实现0.5px,就这样我做了个实验,我设置了1px颜色为000的边框(黑色),如图,

0?wx_fmt=png

 当我使用scale缩放50%的时候,颜色变成了c5c5c5,但是实际仍然有1px。如图,

0?wx_fmt=png

我用的是拾色工具会精确到像素,确实还是1px,所以这种方式并不能实现0.5px而是颜色变浅了。还有些手机屏幕上1px是按照2px来的展示,所以这种方式可以让2px缩放为1px,让1px的边框变得更淡,这种方式确实能让边框变细,但不能说是0.5px。

9.user-select:none

该属性让区域内容无法被选中,可以阻止用户长按复制,也可以避免用户复制无关内容,比如下面我只希望用户复制6655验证码,除了6655我都设置了user-select:none,长按其他部分并不会出现复制按钮,按钮数字就可以,并且第三幅图的左右下标只能在6655间拖动

 0?wx_fmt=png

10.js-class

在为dom绑定事件的时候,大家可能会直接绑定当前有样式的class,这样会因为修改或者替换class名称,影响JS,而如果定义一个无样式的js前缀的类 专门用来绑定事件,这样就解除了样式和逻辑的耦合,在读代码的时候,也能一下子看出哪些元素绑定了事件的。

0?wx_fmt=png

 

11.公共类组合写法   

好吧,这是我自己命名的,我们先看下第一种写法,这很常规,所有样式写在一个class里

0?wx_fmt=png

再看下第二种,定义一个公共类,通过less在样式里直接引入这个类,第二种效率会高一点(少写几个字母),但是需要熟悉和维护公共类

0?wx_fmt=png

 

 再看第三种,把公共类写在元素的class里,这一种比较灵活,比如我现在要写两个item的元素,一个左浮动,一个右浮动,那么这种就能不改动item,而直接使用不同的类实现不同的样式,就像JS的代码去重一样,传入一个不同的参数进行区分,一样的地方共用。

0?wx_fmt=png

第四种公共类全部写在元素里, 在写dom的时候都不用去写css了,直接把想要的类写进dom,是不是有点像JS里的组件化,这种写法在特定情况下比较高效,比如PC后台类项目,对UI要求不高,就比较适合,这个高效也取决于公共class类是否全面,对项目中的class是否熟悉,但是也要注意不要让元素的长度太长,尽量保持在4个类以内,超出的话就不应该用这种写法。

0?wx_fmt=png

 

这四种写法其实都可以,在一个项目中,针对不同的部分都可以用不同的写法,可以非常灵活的选择想要的方式。


12.rem布局的文字大小

大家都知道浏览器一般不会让文字小于12px,如果设置小于12px浏览器都会显示12px, 我们在用到rem布局的时候,元素是会根据屏幕宽度等比例缩放的,比如设计师给到750px的设计稿,如果某一个元素文字是22px,那么当用户的屏幕宽度是375的时候,文字会缩放为11px,实际浏览器就会显示为最小12像素,那么其他非字体元素比例仍然会缩小,这个时候字体可能和其他元素的比例就不是原设计稿的比例了,如果用户屏幕是320px,那么和原设计稿元素间的比例就差更多了。所以我们一定要根据自己的情况告诉设计师,在宽是750像素的设计稿里,字体最小应该是多少像素。

 0?wx_fmt=png

13.object-fit: cover

我们在做列表页的时候,图片都是固定的大小,比如是一个100px*100px的正方形图片,但是很有可能拿到的图片并不是正方形的,这个非正方形图片放到正方形的img标签里,就会变形如果使用object-fit:cover  可以裁剪超出比例的部分,这样图片看起来就不会是变形或者拉伸的了,但是这样会导致图片残缺,根据图片的不同,可能裁剪掉关键部分的内容,但是鉴于列表本来就是缩略图,所以还是可以加上这个属性的,是一个比较折中的办法。

0?wx_fmt=png

 

14.图片的约定

说到图片拉伸的问题, 就要说说对于图片的约定,因为不管是拉伸还是裁剪都会导致图片的残疾,拉伸影响视觉,裁剪害怕关键部位丢失,如果不严格按照约定的规范来,肯定是不能兼容所有情况的,因此在做项目的一开始就要和产品运营们约定好图片比例,建议约定为正方形。


小结

总得来说,学好css,需要长期推敲,长期注重和完善代码的细节,在每一次项目实战中,抽出一点点时间优化、尝试,日积月累成为个人的体系,
个人的风格。这种体系和风格,一般来说你自己都习惯了,会习以为常,甚至总结的时候都不知道应该说什么,但是当你去维护或者看别人的代码的时候,你就能体会出,
原来这个地方别人可能会这样用,你提出自己的见解,就能对团队和周围的同事产生好的影响,如果自己的有问题同事指出来,也可以反过来,提升自己的认识。 

和设计师。。。

要做好css,写好页面,和设计师的沟通也是很重要的一个技能,因为设计师决定页面最终要呈现的样子,要通过项目验收,也必须要设计师验收通过才行。

情景1:


设计师给过来一个交互效果,前端拿到,一想交互效果还可以,但是实现成本比较高,功能都做不完,不想做这么细,然后就直接说没时间这个做不了,设计师一想这个交互很难吗,别人都能做,你为什么不做,就这样来回几句就闹矛盾了,闹到产品那里去了,最后可能交互效果还得做,时间也耽误了。其实这个是很多前端会遇到的问题,时间压得紧,功能可能都要延期,还来做这些交互,自然会有点抱怨,情绪一上来,把产品和设计都得罪了,最后还是要做,久而久之矛盾越来越深,沟通就越来越困难。 换个思路想问题,设计师大部分时候时间也很紧,要对产品和设计领导有所交代,前端又在催,好不容易做出来了,你这也不能实现那也不能实现,你这样我也没法交代啊。那么我们换个沟通方式,比如这样说:我们这边时间确实有点紧,这个交互比较麻烦,比较费时间,我做是可以做,只是可能会影响项目进度,你看要不我先做简单点,等到提测的时候有时间再加上这个交互,实在不行能不能等到上线之后,我单独再优化一下这个地方,很快就能上线。

设计师们还是讲道理的,根据web上的一些特性,设计师设计出来的一些样式一些想法或许没法实现,又或者实现成本太高,我们就得说服他们这个地方为什么不能实现,因为他们不懂,所以害怕你忽悠他们(实际有时候就有人忽悠他们),所以要想说服别人,自己一定要把问题搞清楚,把知识点理清楚,不能实现的理由对设计师说清楚,并且要有理有据,同时最好网上找到相关博客或者官方解释进行佐证。有很多矛盾和问题,就在于我们疏忽了沟通,又或者说是我们自己偷懒了,其实当自己把知识点能给外行说清楚了,这也说明是理解透了,也是对自己能力的提升。设计师辛苦设计的稿子一定要尽量达到他们的效果,也要考虑扩展性和可实现性,态度很重要,不要让人觉得是在敷衍他们,什么是敷衍,不解释清楚就说不做,就是敷衍,否则碰一鼻子灰只有怪自己。技术点要搞清楚,要不解释不清楚,别人不买单,在发现设计稿有问题的时候,耐心提醒其中一些不合适的地方,多帮别人承担一点,前端和设计师要友好相处

再随便聊聊

不要兼容IE低版本(我觉得兼容11以上就行了),特别是创业公司,对创业公司来说,性价比极低,本身创业公司没技术、没沉淀、活下去都是一个问题,兼容IE就是甚至浪费人力成本,比如说IE8不支持圆角,得用图片代替,
没有placeholder,得用JS来模拟。对于个人来说,技术的更新换代是大势所趋,我们要往前看,有的是东西给你学,不要在这个地方浪费青春。

有空大家都去看看bootstrap源码,看一些核心的部分就够了,比如变量variable等一些最常用的部分,源码其实不难,能得到很多启发。


觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

640?wx_fmt=png

640?wx_fmt=jpeg


淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

小菜的GIS之路

小菜09级本科生,在一所不起眼的211学校学习,2009年高考失利然后随便在附近找了一所大学上,结果被调剂到地理信息专业,现在还依稀记得同专业的学生第一次见面就调侃:“你是不是被调剂到这个专业的啊?(...
  • naruto12345
  • naruto12345
  • 2013年01月02日 15:15
  • 1499

欲先攻其事必先利其器(第三方资源篇)

先前整理《超全!整理常用的iOS第三方资源》里面收藏的很多第三方插件跟源代码,经过这半年多的不断累集,在原有插件上面又增加一倍以上,赶紧分享出来,如果您有不错的第三方插件也可以分享;...
  • u010127054
  • u010127054
  • 2016年06月07日 12:30
  • 1872

欲练此功,必先自宫

【导读】练葵花宝典为何要自宫呢?阿凯告诉我,这个问题困扰了他好多年。后来,我有一个美女客户叫Rita,她和我聊到《笑傲江湖》,稀里糊涂扯到了“欲练此功,必先自宫”这上面来了。所以,我专门写了这篇小品文...
  • ReturningProdigal
  • ReturningProdigal
  • 2017年09月30日 08:59
  • 218

程序员修炼之路(八)再次写给我们这些浮躁的程序员

本篇文章是程序员修炼之路的第八篇。 程序员修炼之路系列我决定将他定位于提升程序员素养的专栏,我会分享更多好的文章。 感谢原作者,因为你让我思考 原文出处:http://blo...
  • lanzhizhuxia
  • lanzhizhuxia
  • 2012年09月05日 17:44
  • 4793

Java大神修炼之路

        一、基础篇   1.1 JVM   1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收   http...
  • huaieli1
  • huaieli1
  • 2016年01月17日 00:27
  • 884

欲修炼成架构师,必先……

原标题:欲修炼成架构师,必先…… 作者|陈美珍 编辑|小智 在今天的技术圈,可能随便遇到一个人递给你一张名片,title 就是某某架构师。架构师多如过江之鲫,也正是眼下...
  • nfzhlk
  • nfzhlk
  • 2017年10月10日 06:41
  • 97

前端js与css兼容性问题

前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹...
  • u598975767
  • u598975767
  • 2016年04月25日 16:02
  • 4393

释万行上师:罕见的修行真相揭秘【全】

“辟谷”的问题    当修到一定程度,胃气充满了以后,就不需要食物了(有的是短期不吃,也有的长期不吃。)我们五脏六腑的元气,都是通过胃产生的。大家都知道,我们从嘴里吃进的食物,首先是贮存到了胃里面...
  • ldghd
  • ldghd
  • 2017年06月11日 15:31
  • 1062

前端css,js缓存提升网站性能

看到知乎上的这篇文章,感觉受益匪浅。怕下次找不到了,就转载在博客里。文末注明出处。 这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到...
  • huanghanqian
  • huanghanqian
  • 2016年03月16日 10:08
  • 2738

前端优化之-css与js阻塞问题

如果js脚本(行内或者外部)之前有css样式文件,则js将等到css渲染完成再执行,css之后的js将按照顺序执行。 示例: Document var ...
  • a409051987
  • a409051987
  • 2017年05月30日 22:23
  • 598
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:欲练JS,必先攻CSS——前端修行之路
举报原因:
原因补充:

(最多只允许输入30个字)