首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS学习中的一些难点,你还认为它简单吗

和HTML相比,CSS需要学习的内容更加琐碎,无法完全罗列出来,从表面上看,CSS中似乎只要掌握选择器和样式就可以了,但是诸如选择器的权重、定位、继承等等一系列内容常常被初学者忽视,导致我们编写的CSS代码很糟糕,后期的维护也十分不便,这里我来和大家列举几个我认为在CSS学习中属于难点的部分。

1. 编码习惯

编码习惯是任何一种开发语言都会提到的内容,不过正如我之前和大家介绍的,在后端编程方面对于编码有着严格的规范,很少出现阅读性差的代码,不过前端在编码方面似乎没有任何的规范可言,这点在CSS中表现的最为严重。我们知道,完成一个网页的开发,需要添加大量的样式代码,这些样式代码常常会被放到一个样式文件中,很多人在声明样式的时候很随意,并不注意代码的排列,所以一份开发好的样式文件在一周之后就变成了一个完全陌生的文件,即便当初参与的开发人员也很难从这些代码中一下选中需要修改的部分,可想而知,后期的维护人员在看到这些代码的时候是十分奔溃的,如何让CSS代码更加规范,方便之后的阅读和维护是一个需要我们思考的问题,这些也是应该在编码规范中体现的内容,考虑清楚这些内容之后,对于我们养成良好的编码习惯十分的重要。

2. 样式匹配原则

在HTML中有三种方式使用CSS,一个样式文件中可能重复的针对网页中的某个元素设置样式,所以浏览器渲染页面的过程十分的复杂,作为一个开发人员,我们或许不必关心具体的过程,但是对于其中的一些原理应该是需要了解的,理解这些有助于我们编写更加高效的选择器,减少浏览器在渲染页面时判断的过程,加快页面渲染的速度,这对于提升用户体验来说至关重要,不过很多时候我们似乎并不是很关心这个问题,对于那些重复的样式更习惯去直接修改。

3. 定位样式的理解

在网页中,默认内容是按照从左到右、从上到下的顺序排列的,不过我们平常看到的网页并非如此,改变网页中内容的排列方式需要使用一些定位样式,比如CSS中的float、position,尽管这两个样式属性的值不超过十个,但是因为使用这两个样式而导致网页变化却是巨大,这些只要接触过前端的开发的人员基本上都很熟悉,不过关于浮动和定位您真的完全了解吗?在采用这些样式之后网页中其他的内容在排列上会出现怎样的变化呢?这些内容在理解上是有一定难度的,需要我们经过测试去发现一些规律,记录并总结它们,在之后的开发中会让我们避免很多麻烦。

4. 浏览器兼容性

浏览器的兼容性是前端开发者最头疼的问题,特别是涉及到一些老旧的浏览器时,很多人会疑惑,在今天还会有人使用IE8之前的浏览器吗?答案是肯定的,特别是在一些办公单位,有些电脑采用的系统依旧是XP的,这些用户对于浏览器之间的差异并不关心,只要可以完成工作就可以,不过我们作为开发者对此并不能采取这样的态度,我们需要在页面上针对这些差异提供合理的解决方案,尽最大的可能让用户满意。不过遗憾的是,浏览器的更新速度很快,我们很少会找到关于浏览器差异总结的内容,只能在练习中去尝试使用一些方法弥补发现的问题。

……

关于CSS的学习,其实还有很多,比如配色、配图,在很多人看来这是美工的工作,不过真实参加过工作的人应该很清楚,大多时候项目组并没有安排美工,这些工作需要开发人员来完成,不知道在您的学习或者工作中发现CSS还需要我们掌握哪些内容呢?对应的有没有找到一些操作技巧呢?

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191118A03Y8A00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券