CSS设计师要避免的常见错误？_Css

CSS设计师要避免的常见错误？

css

CSS设计师要避免的常见错误？,css,Css,CSS设计师最常见的错误是什么？不使用重置样式表的目的是减少浏览器在默认行高、页眉边距和字体大小等方面的不一致 -Eric Meyer 在为IE编写样式时使用CSS hacks而不是条件注释。不考虑使用怪癖模式的internet Explorer 误解甚至不考虑选择器的特殊性 body div a.mylinkclass { } 比 a.mylinkclass { } 认为： <div class="topMargin15"></div> 与直接将其写入样式属性相

CSS设计师最常见的错误是什么？

不使用

重置样式表的目的是减少浏览器在默认行高、页眉边距和字体大小等方面的不一致

Eric Meyer

在为IE编写样式时使用CSS hacks而不是条件注释。

不考虑使用怪癖模式的internet Explorer

误解甚至不考虑选择器的特殊性

body div a.mylinkclass { }

比

a.mylinkclass { }

认为：

<div class="topMargin15"></div>

与直接将其写入样式属性相比，它有很大的改进。您应该定义它在HTML中是什么，以及它在CSS中是什么样子。

未能理解级联和继承，因此导致大量重复代码。

使用的类名过于具体，不够通用。例如

.redLeftNewsHeader

而不是

.header

当你决定用蓝色主题重新设计你的网站时会发生什么？如果要在与新闻无关的项目上使用该类，会发生什么情况？

不使用压缩生产代码，请尝试在元素上使用边距或填充，而不是同时使用边距或填充。你可以避免一些浏览器问题。

直到一年后（像我一样）才意识到，你一次可以申请一门以上的课程

.Center {text-align:center}
.Disco {background: red; text-decoration: blink;}
.Highlight { font-weight: bolder;}

    <div class="Disco Center Highlight"></div>

.Center{text align:Center}
.Disco{背景：红色；文本装饰：闪烁；}
.突出显示{字体大小：粗体；}

是有效的，它将把它们结合起来

开发时不检查跨浏览器

最好在整个站点完成之前捕获并修复差异

我已经记不清“我的网站在Firefox/IE/Safari中看起来很棒，但在IE/Safari/Firefox中却一团糟。”问题。

使用“0px”而不是“0”。现在我认为自己对CSS相当不错，但我有时还是这样做…… 例如：

“

padding:0px

”而不是“

padding:0

”

没有有效地使用CSS精灵，甚至根本没有使用CSS精灵。

不了解什么是浮动，如何正确使用它们，以及如何清除它们

未设置浮动的宽度

div

不层叠样式

以下情况不好：

body { color:#ff0; }

h2 { color:#ff0; text-decoration:underline; }

这样会更好

body { color:#ff0; }

h2 { text-decoration:underline; }

#ff0

将自动应用，如果不干扰其他一些样式定义。

忽略。

例如，如果您的页脚中有一组链接，您希望这些链接的样式与普通链接不同，不要在每个链接上都放置一个类，请使用派生选择器

// instead of this
.footerlink {
}

// use this
#footer a {
}

您还可以使用逗号对选择器进行分组：

#header a, #footer a {
}

其他有用的选择器包括：

子选择器：
```
E>F
```
同级选择器：
```
E+F
```
属性选择器：
```
input[type=“text”]
```
第一个子伪类：
```
：第一个子类
```
（对标题非常有用-您不希望div中的第一个标题有上边距，但对后续标题有上边距）

不幸的是，后几项不适用于IE6，因此只能用于渐进式增强（如果您支持IE6）。

使用单词命名颜色（并非所有颜色）浏览器知道所有单词）
使用无效样式（填充：自动）（例如）
写#ffffff而不是#fff。（共3对，可压缩仅转换为3个单一值）
不在十六进制颜色上使用#
无法确保您的页面不会中断在150%-200%缩放时使用。古老的人们/几乎失明的人使用互联网也是
没有使用足够的对比度或空白
不验证标记/css
确保你的页面很好地退化
称自己为CSS设计师，你你不是在设计样式表，你是设计一个网站，通过实现样式表
使用绝对定位（它是在别人的脸上会显得很糟糕计算机（某处）
没有保持样式表整洁和有组织的。不要听这些告诉你把一切都在一条线上，因为它节省带宽。你应该留着它你觉得最容易阅读的方式和修改，然后在你完了
不在长字体周围加引号名字

忘了一个，我的坏朋友

关心IE6。每次你争辩说它应该得到支持，或者人们还没有更新，这都是他们的错，也许如果一切都搞砸了，他们会更有动力去下载一些不是堆积如山的东西。我可以写一篇20页的文章来说明我有多讨厌IE6，我不是在开玩笑。我曾经给一位前老板写过一篇5页的文章，探讨为什么IE是最糟糕的浏览器。他把它转发给了他的所有朋友，他们现在都使用Firefox或Safari

（在他告诉我他希望自己的网站看起来像他所在行业领先公司的网站后，我辞职了。这是一个优秀的网站，甚至有一个原创的音乐乐谱，当你浏览画廊时播放。他付给我大约每小时15美元（我上高中），每周只让我工作9小时。）

未使用屏幕的全宽
不使用打印样式表来隐藏除用户想要打印的内容以外的所有内容

当浏览器处于怪癖模式时，尝试使用CSS执行任何操作
不要使用Firebug的工具来查看元素的布局和优化CSS
制作固定高度容器，不处理溢流
尝试在IE6中使用透明PNG-24。（Adobe Fireworks可以制作在IE6中工作的透明PNG-8。）
根本不使用单位（非常糟糕！）

#header a, #footer a {
}

a {font-size:12px} /* NEVER! NEVER DO THAT */

<h2>Something about <a href='...'>this</a> and <a href='...'>that</a></h2>

h2 a {font-size:/*same size as for h2*/}

a.different {/* do crazy stuff with your fonts */}