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

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

不使用重置文件.

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

-Eric Meyer,Meyerweb.com

Answer 3

认为:

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

同

.topMargin15 {
    margin-top: 15px;
}

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

Answer 4

无知的选择者.

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

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

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

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

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

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

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

• 不使用#on十六进制颜色

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

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

• 不验证标记/ CSS

• 确保您的页面很好地降级

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

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

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

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

忘了一个,我的坏

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

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

Answer 9

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

body div a.mylinkclass { }

比具体更具体

a.mylinkclass { }

Answer 10

不使用Firebug

Answer 11

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