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

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

1> JBrooks..：

---

直到一年没有意识到(像我一样),你可以一次申请超过1个班级.

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

    

是有效的,它会将它们全部组合在一起.

---

在相关的说明中,您是否知道可以使用div.Disco.Center {}创建一个查找两个或更多类的选择器？

---

如果您想要更改网站设计并且不再希望该元素居中,会发生什么？现在你有"迪斯科中心亮点"左对齐!hmmmm ...

2> Sampson..：

---

不使用重置文件.

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

-Eric Meyer,Meyerweb.com

---

这是一个好主意,但我认为它会重置太多东西.

---

我更喜欢"设置"到"重置".将所有边距和填充归零然后再将它们添加回来是没有意义的.没有大量的元素需要*他们的边距重置(例如`div`,`form`,`table`).通常,默认设置都很好,浏览器大多数都符合http://www.w3.org/TR/CSS2/sample.html的默认设置.

3> TM...：

---

认为:

同

.topMargin15 {
    margin-top: 15px;
}

以某种方式和改进直接将其写入style属性.你应该要确定它是什么,在HTML和它是什么样子的CSS.

---

@ayyash - 不正确.像.newsTitle这样的东西比.red更具解释性.如果您想在一年后改变网站的设计,并希望所有标题都是黄色的,该怎么办？现在你有了.red类的新闻标题实际上是黄色的!

---

@Koper:不,不是吗？

4> DisgruntledG..：

---

无知的选择者.

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

// instead of this
.footerlink {
}

// use this
#footer a {
}

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

#header a, #footer a {
}

其他有用的选择器包括:

子选择器: E>F

兄弟选择器: E+F

属性选择器: input[type="text"]

第一个子伪类:( :first-child对于标题非常有用 - 你不希望div中的第一个标题有一个上边距,但是你可以用于后续标题)

不幸的是,后者很少在IE6中不起作用,所以只用于渐进增强(如果你支持IE6).

5> thedz..：

---

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

6> Emily..：

---

在开发时不检查跨浏览器.

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

我已经忘记了"我的网站在Firefox/IE/Safari中看起来很棒,但它们在IE/Safari/Firefox中都被搞砸了." 的问题.

7> Tim Booker..：

---

无法理解级联和继承因此最终导致了大量重复的代码.

---

一个很好的例子.级联和继承不是一回事.

8> Sneakyness..：

---

不了解(甚至不知道存在的)盒子模型

不知道选择器是什么,或者如何正确使用它们

使用单词命名颜色(并非所有浏览器都知道所有单词)

使用无效样式(例如padding:auto)

编写#ffffff而不是#fff.(它是3对,可以简化为3个单值)

不使用#on十六进制颜色

在150%-200%变焦时使用时,不确保您的页面不会中断.老人/几乎盲人也使用互联网.

没有使用足够的对比度或白色空间

不验证标记/ CSS

确保您的页面很好地降级

称自己为CSS设计师,您不是在设计样式表,而是通过实现样式表来设计网站.

使用绝对定位(它会在某人的计算机上看起来很糟糕)

不保持样式表整洁有序.不要听这些网站告诉你把所有东西放在一行,因为它节省了带宽.您应该以最容易阅读和修改的方式保留它,然后在完成后将其压缩.

不在长字体名称周围加引号

忘了一个,我的坏

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

(我告诉他,他希望他的网站看起来像他的行业领先公司的网站.我退出了.这是一个很棒的网站,甚至有一个原创的乐谱,当你通过画廊时播放.他给我的东西是15美元/ hr(我在高中)只让我每周工作9小时.)

---

这充满了糟糕的建议.如果您知道如何使用绝对定位,则使用绝对定位(通常在相对定位的块内).并且您的推理适用于每个CSS规则.#ffffff vs #fff是一个样式问题,仅此而已(我更喜欢与较长风格的一致性).

---

"这是一个很棒的网站,甚至有一个原创的乐谱,当你通过画廊时播放"Bullet point 16; >使用背景音乐制作网站:P

9> Joel..：

---

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

body div a.mylinkclass { }

比具体更具体

a.mylinkclass { }

10> Andy Ford..：

---

不使用Firebug

11> Jason..：

---

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