糟糕的css用法 1-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

糟糕的css用法 1

简介:

现在网站追求越来越漂亮好看,越来越炫,所以css是必不可少的.可是我发现许多人使用css的方式是不对的,至少是不推荐的.

比如下面的css用法不对

(1)一个页面对应一个css文件

这种做法是我深恶痛绝的,为什么呢?可重用性太差了!

比如哪天我突然要改变一个按钮的样式,那就坏了,只要包含按钮的页面的样式我都得改,比如有20个页面包含了按钮,那么我就得修改20个css文件,这不要人命吗?

根本原因:相同的样式重复出现在多个文件中.

 

(2)编写css样式时直接修改html标签的样式

例如:

 没有通过id或class,这种方式非常不好,因为它的影响是完全开放的,任何一个页面引入该css文件就会受到影响.我项目中就遇到了.当时我们使用了WebCalendar.js 作为日期控件,本来界面应该是:

 

但是实际的效果是:

 原因:引入的css竟然影响了其他控件.这不是我们期望的效果.

 

正确的方式应该是:

 想要应用该css怎么办?加上class就行了.

 

(3)相同的代码出现在多个地方

 

 这段css代码竟然出现了至少四次.如果客户说要修改行(line-height)的高度,那么我就要同时修改至少四个地方.这不是自己人坑自己人吗?

 

(4)滥用id

例如:

 我们要知道id的权重是最高的.在日常开发中,我们更多的情况是会遇到如下情况:

#header a { border:2px dashed #000 }

   假设这是我们的一个项目,现在我们决定要把一个在 header 的 另一个link设置成无边框,随手一写,我们添加了:

.special-link { border:none }

   然后再在 html 中添加了一个 special-link 的class 类,这下解决我们的问题了吗? 答案是:没有! 由于 id 的权重如此之高,我们需要更高权重的声明才能实现我们的需求。

 

下面这样写才是正确的:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章