Question

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

Answer 1

直到一年没有意识到（像我一样），你一次可以申请超过1个班级。

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

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

是有效的，它会将它们全部组合在一起。

Answer 2

想到：

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

与

.topMargin15 {
    margin-top: 15px;
}

以某种方式和改进直接将其写入style属性。您应该在HTML中定义它是什么，并在CSS中它看起来像什么。

Answer 3

未使用reset file。

“重置样式表的目标是减少浏览器在默认行高，边距和标题字体大小等方面的不一致性。”

- Eric Meyer，Meyerweb.com

Answer 4

忽略selectors。

例如，如果您的页脚中有一堆链接，您希望其样式与普通链接不同，请不要在每个链接上放置一个类，请使用后代选择器。

// instead of this
.footerlink {
}

// use this
#footer a {
}

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

#header a, #footer a {
}

其他有用的选择器包括：

子选择器：E>F
兄弟选择器：E+F
属性选择器：input[type="text"]
第一个子伪类：:first-child（对标题非常有用 - 你不希望div中的第一个标题有一个上边距，但是你可以用于后续标题）

不幸的是，后者很少在IE6中不起作用，所以只用于渐进式增强（如果你支持IE6）。

Answer 5

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

Answer 6

开发时不检查跨浏览器。

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

我已经不记得“我的网站在Firefox / IE / Safari中看起来很棒，但它们在IE / Safari / Firefox中搞砸了。”的问题。

Answer 7

无法理解级联和继承因此导致大量重复代码。

Answer 8

Not understanding (or even knowing about the existence of) box model
Not knowing what selectors are, or how to correctly use them
使用文字命名颜色（不是全部浏览器知道所有单词）
使用无效样式（填充：auto 例如）
编写#ffffff而不是#fff。（它是3对，可以浓缩只需3个单一值）
不使用#on十六进制颜色
不确保您的网页不会中断在150％-200％变焦时使用。旧人/几乎是盲人使用的互联网也是。
没有使用足够的对比度或空白
未验证标记/ css
确保您的网页很好地降级
自称为CSS设计师你没有设计样式表通过实施设计网站样式表。
使用绝对定位（它是看起来好像被别人搞砸了电脑，某处）
不保持样式表整洁举办。不要听这些告诉你的网站一切都在一条线上，因为它节省带宽。你应该保留它你最容易阅读的方式并修改，然后压缩它你已经完成了。
不在长字体周围加引号名称

忘了一个，我的坏

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

（在他告诉我他希望他的网站看起来像他的行业领先公司的网站之后我退出了。这是一个很棒的网站，甚至有一个原创的乐谱，当你通过画廊时播放。他是付给我15美元/小时的费用（我在高中）只让我每周工作9小时。）

Answer 9

误解或甚至不考虑选择者的特异性。

body div a.mylinkclass { }

比

更具体

a.mylinkclass { }

Answer 10

不使用Firebug

Answer 11

不了解花车是什么，如何正确使用它们，以及如何清除它们！

Answer 12

不能有效地使用CSS Sprites，甚至根本不使用。

Answer 13

未设置浮动 div的宽度。

没有级联样式。

以下是不好：

body { color:#ff0; }

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

这将是更好

body { color:#ff0; }

h2 { text-decoration:underline; }

如果没有其他一些样式定义的干扰，

#ff0将自动应用。

Answer 14

在quirks模式下不考虑互联网资源管理器broken box model。

Answer 15

不使用YUI's compressor压缩生产代码

Answer 16

使用不适用于高dpi屏幕的设备
未使用整个屏幕宽度
不使用隐藏除用户想要打印的内容之外的所有内容的打印样式表

Answer 17

使用“0px”而不是“0”。现在我认为自己对CSS相当不错，但有时我仍然会这样做......

实施例： “padding: 0px”代替“padding: 0”

Answer 18

使用太具体且不够通用的类名。例如

.redLeftNewsHeader

而不是

.header

当您决定使用蓝色主题重新设置网站时会发生什么？如果您想在与新闻无关的项目上使用该课程，会发生什么？

Answer 19

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

Answer 20

不考虑您的受众。

Answer 21

我不得不说使用浮动不正确而不理解柱子。你可以很容易地毁掉那种东西（个人经历。）所以，你好......漂浮和清楚。

Answer 22

将font-size，font-family或应在block级别应用的其他属性应用于inline或a等span元素。< / p>

举一个例子一旦使用了那种css：

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*/}

我知道这看起来很明显和基本，但我已经看过太多次了.. span或a应该操纵字体大小的唯一一点是用于使事物看起来不同的特殊css类：

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

Answer 23

尝试在元素上使用边距或填充，而不是两者。您可以避免某些浏览器问题。

Answer 24

写piss穷人HTML

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

24 个答案: