当前位置: 首页 > 蓝韵观点 > 前端开发 >

让你的CSS更尽完美的技巧

蓝韵网络  /  前端开发  /  2017.07.28

0

CSS要学会并不是一件难事,但要在一个大项目中写好CSS和管理好CSS还是有一定的难度的。不过并不可怕,如果你遵循一定的方法,还是很容易写出一个较好的CSS,也能很好的管理好你的CSS样式。下面搜集了几个这方面的技巧,希望能帮助大家写出一个更好的CSS样式。

一、不要使用全局复位样式

使用全局复位样式来删除所有HTML元素的默认的“margin”和“padding”是非常不好的一种做法。他不仅缓慢和效率低,但你在项目中必须重置这些参数。就像Eric Meyer重置样式。 

不好的方式:

建议的方式:

 

二、不要使用IE HACK

IE Hack可能有时候作用是蛮大的,紧急时候能帮你解决大问题。但尽量不要使用IE Hack,就算你在IE下需要特殊写一个样式,我强烈建议您使用条件样式来写:

不好的方式:

建议的方式:

然后把样式写到ie-styles.css文件中:

 

三、使用有义的类名和ID名

假设你定的的侧边栏使用了“left-sidebar”类名,但你是设计重新布局,将原来的左边栏放置在右边栏,那么你定义的“left-sdiebar”将无任何意义。你应该把之前声明的类和ID名做一些思考,让他们在你的页面中更具有意义,更让人读懂:

不好的方式:

建议的方式:

 

四、利用CSS继承关系

如果多个子元素的样式和具有相同的样式,应该使用继承关系来写样式,这是一个很不错的方法。它能使你更容易更新你的代码和管理你的代码,还将大大减少CSS文件大小。

不好的方式:

建议的方式:

 

五、群组选择器

如果你的样式,多个元素具有相同的样式,那么你可以使用群组选择器来写样式,这将大大的节省你的时间和空间。

不好的方式:

建议的方式:

 

六、使用速记属性

CSS中有很多属性可以使用缩写法,比如“margin”、“padding”、“background”、“font”、“border”、“color”等。那么在你编写你的CSS属性时,碰到这些属性尽量使用其缩写,其一能快速编写你的CSS代码,其二能帮你减少你的样式大小。

不好的方式:

建议的方式:

 

七、组织CSS代码

使用一定的模式来组织你的CSS代码,方便你在后期查找你需要的代码,比如说你要寻找一个特定的样式,这样将为您省下大量的时间找寻找他。下面展示的是一个组织CSS代码的示例:

 

八、增加CSS的可读性

写一个可读的CSS样式,使你更容易找到和更新一个样式。下面是两种不同的版本样式:

 

九、添加适当的注释

在CSS样式中使用适当的注释有多个好处,其一可以分开不同部分的代码;其二可以增加代码的可读性等:

 

十、按CSS属性字母顺序排列

这个习惯可能没有几个人有,我刚到公司时,我的Boss就是这样要求我写CSS,要按属性的字母顺序来写,我当时就觉得那样写真是多此一举,蛋疼的事情。因为这样书写CSS样式真的好困难,但久而久之我也坚持下来了,后来发现这样写虽然麻烦,便也是蛮好的,它让我更容易寻找我需要的样式。

不好的方式:

建议的方式:

 

十一、使用外部样式表

样式写在单独的一个页面中,只能对当前页面有效果,为了更好的管理和更新你的样式,最好把你的样式单独的放在外部文件中,然后在使用“”引用外部样式文件 。

不好的方式:

或者写在行内

建议的方式:

 

十二、分割成多个CSS文件

如果你在一个项目中有多个模块,而且每个模块都有不同的风格,此时你可以将你的CSS样式分割成多个文件,它们每一个文件对应你的一个模块,然后在创建一个样式文件,将这些文件导入到这个文件中。这样做能更好的在一个大项目中组织你的代码,而且意味着减少更多的HTTP请求和加载时间。

不好的方式:

建议的方式:

其中styles.css导入下面的样式文件:

 

十三、压缩CSS代码

如果你的项目调试完成,只差上传到服务器上时,那么在上传你的文件之前,最好使用相关的压缩工具压缩你的CSS代码,以减少文件大小,提高网页的加载时间。

 

十四、编写一致的CSS

当你在同时开发多个Web项目中时,你应该尽量编写一些相同的CSS代码,让所有项目能使用到这样同的CSS代码,这样将减少你的工作量,提高你的开发效率。

我希望上面的这些方法能帮助你写出更好的和易于管理的CSS代码。如果你在这方面有更好的建议,您可以在下面的评论中直接留言,与我们一起分享你的技巧。

蓝韵在线客服
网站建设
企业网站点击这里
网上商城点击这里
移动互联网
手机网站点击这里
微信网站点击这里
网络营销
在线咨询点击这里
售后服务
在线咨询点击这里