糟糕的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 的权重如此之高,我们需要更高权重的声明才能实现我们的需求。

下面这样写才是正确的:

#header .special-link { border: none }

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

时间: 2024-07-28 20:25:28

糟糕的css用法 1的相关文章

一些CSS用法

表示非前端技术人员,不会做前端,但是写blog时有时还是需要美化一下什么的.所以作一些记录. 表格边框和背景控制: 1 <table border="1" bgcolor="yellow"> border控制边框粗细,bgclor控制表格背景. 字体大小控制: <span style="font-size: medium;">文字</span> <span style="font-size: 1

CSS用法2

问题描述 数据库/******Object:DatabaseepetScriptDate:2007-7-414:46:37******/IFEXISTS(SELECTnameFROMmaster.dbo.sysdatabasesWHEREname=N'epet')DROPDATABASE[epet]GOCREATEDATABASE[epet]ON(NAME=N'epet_Data',FILENAME=N'd:workdatabaseMSSQLdataepet_Data.MDF',SIZE=1,F

网页重构应该避免的10大 CSS 糟糕用法

对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能.那么我们从哪里着手呢?对于网页重构工作来说,我们应该养成什么样的开发习惯?一个糟糕的 css 用法是怎样的?我们应该怎么处理这些糟糕的 css.今天这篇文章,我将谈一谈10个我们应该避免的 css 糟糕用法,当然,我们也会分享怎么才是正确的用法.    为了方便大

教案:S2-Y2转换课程第1章常见的CSS样式

授课教师:牟勇 课时:100分钟   l  本章技能目标 n 会创建统一外观的字体文本 n 会创建无下划线的超连接样式 n 会创建个性化的表格 n 会创建个性化的表单 l  本章重点 nCSS语法规则 nCSS常用属性 l  本章难点 n会创建个性化的表格 n会创建个性化的表单 l  本章工作任务 u  美化"宝贝分类"页面 u  制作并美化"注册"页面 l   整章授课思路 n本章共有共有三个知识点:CSS语法规则,CSS用法,CSS常用属性 n因为4.0的学员在

根据分辨率不同调用不同的css文件

css|分辨率 根据分辨率不同,调用不同的CSS文件根据分辨率不同,调用不同的css文件 dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 

CSS菜鸟学习小结

css 一.基本概念 1. 选择符:就是HTML当中可用的任何元素,例如:body,a,td p..... 2. 类: 就是我们自己给格式起的名字,应用的时候叫名字(class=类) 3. 伪类:visited. active .link 等 二.基本语法 1.选择符 { 属性: 值 } 例如: TD { FONT-SIZE: 9pt} 2.选择符.类 { 属性: 值 } 例如: td.aaa { color: #191970 } 只能在该元素下有效 引用方法: <P CLASS=aaa> 3

判断浏览器类型屏幕分辨率自动调用不同CSS的代码

css|分辨率|浏览器 既判断分辨率,也判断浏览器  程序代码 <SCRIPT LANGUAGE="JavaScript"><!--if (window.navigator.userAgent.indexOf("MSIE")>=1){var IE1024="";var IE800="";var IE1152="";var IEother=""; ScreenWid

根据浏览器和分辨率调用CSS代码的js脚本

<SCRIPT LANGUAGE="JavaScript"><!--if (window.navigator.userAgent.indexOf("MSIE")>=1){var IE1024="";var IE800="";var IE1152="";var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother)}

[译] 再谈 CSS 中的代码味道

本文讲的是[译] 再谈 CSS 中的代码味道, 原文地址:Code Smells in CSS Revisited 原文作者:Harry 译文出自:掘金翻译计划 译者:IridescentMia 校对者:rccoder, Germxu 再谈 CSS 中的代码味道 回到 2012 年,我写了一篇关于潜在 CSS 反模式的文章 CSS中的代码味道.回看那篇文章,尽管四年过去了,我依然认同里面的全部内容,但是我有一些新的东西加到列表中.再次说明,这些内容并不一定总是坏的东西,因此把它们称为代码味道:在