糟糕的css用法 1

简介: <div class="markdown_views"><p>现在网站追求越来越漂亮好看,越来越炫,所以css是必不可少的.可是我发现许多人使用css的方式是不对的,至少是不推荐的. <br>比如下面的css用法不对 <br><strong>(1)一个页面对应一个css文件</strong> <br>这种做法是我深恶痛绝的,为什么呢?可重用性太差了! <br>比如哪天我

现在网站追求越来越漂亮好看,越来越炫,所以css是必不可少的.可是我发现许多人使用css的方式是不对的,至少是不推荐的.
比如下面的css用法不对
(1)一个页面对应一个css文件
这种做法是我深恶痛绝的,为什么呢?可重用性太差了!
比如哪天我突然要改变一个按钮的样式,那就坏了,只要包含按钮的页面的样式我都得改,比如有20个页面包含了按钮,那么我就得修改20个css文件,这不要人命吗?
根本原因:相同的样式重复出现在多个文件中.
css样式文件

(2)编写css样式时直接作用于html标签的样式
例如:
css样式直接作用于html标签

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

正确的方式应该是:
正确的做法

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

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

这段css代码竟然出现了至少四次.如果客户说要修改行(line-height)的高度,那么我就要同时修改至少四个地方.这不是自己人坑自己人吗?
(4)滥用id
例如:
滥用id
我们要知道id的权重是最高的.在日常开发中,我们更多的情况是会遇到如下情况:

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

假设这是我们的一个项目,现在我们决定要把一个在 header 的 另一个link设置成无边框,随手一写,我们添加了:
.special-link { border:none }
然后再在 html 中添加了一个 special-link 的class 类,这下解决我们的问题了吗? 答案是:没有! 由于 id 的权重如此之高,我们需要更高权重的声明才能实现我们的需求。

下面这样写才是正确的:

#header .special-link { border: none }

总结:建立样式时一定不要使用id,建议使用class

相关文章
|
1月前
|
资源调度 前端开发 CDN
纯css动画库animate.css的用法
纯css动画库animate.css的用法
41 0
|
6月前
|
前端开发 UED
关于 Web 应用的内联 css 和 scss 文件里的 var 关键字用法
关于 Web 应用的内联 css 和 scss 文件里的 var 关键字用法
74 0
|
15天前
|
前端开发
css用法 :is()、:where()和:has()的用法
【4月更文挑战第2天】 css用法 :is()、:where()和:has()的用法
20 12
|
2月前
|
前端开发 JavaScript 容器
你知道css中的object-fit的用法吗?
你知道css中的object-fit的用法吗?
42 0
|
3月前
|
Web App开发 文字识别 前端开发
【面试题】 详解css中伪元素::before和::after和创意用法
【面试题】 详解css中伪元素::before和::after和创意用法
|
6月前
|
前端开发
【CSS用法】css限制一行文字数量,超出部分用省略号显示
【CSS用法】css限制一行文字数量,超出部分用省略号显示
60 0
|
8月前
|
前端开发
CSS选择器的常见用法
CSS选择器的常见用法
65 0
|
12月前
|
前端开发
5 分钟一览 CSS 颜色表示方法和专业用法
5 分钟一览 CSS 颜色表示方法和专业用法
|
前端开发
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)