CSS设计器要避免的常见错误?[关闭]

不使用 reset file .

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

- Eric Meyer Meyerweb.com

直到一年后才意识到(像我一样),你可以一次申请一门以上的课程。

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

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

是有效的,它将把它们组合在一起。

认为:

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

具有

.topMargin15 {
    margin-top: 15px;
}

在某种程度上是对直接将其写入样式属性的改进。你应该定义 它是什么 在HTML中,以及 它是什么样子的 在CSS中。

不知 selectors .

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

// instead of this
.footerlink {
}

// use this
#footer a {
}

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

#header a, #footer a {
}

其他有用的选择器包括:

• 子选择器: E>F
• 同级选择器: E+F
• 属性选择器: input[type="text"]
• 第一个子伪类: :first-child (对于标题非常有用-您不希望一个分区中的第一个标题有上边距,但对后面的标题是这样做的)

不幸的是,后几项在IE6中不起作用,因此仅用于渐进增强(如果您支持IE6)。

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

开发时不检查跨浏览器。

最好在整个站点完成之前抓住并解决这些差异。

我已经忘记了“我的网站在firefox/ie/safari中看起来很好,但在ie/safari/firefox中却一团糟”的问题。

无法理解级联和继承,从而导致大量重复的代码。

• Not understanding (or even knowing about the existence of) box model

• Not knowing what selectors are, or how to correctly use them

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

• 使用无效样式(填充:自动 例如)

• 写fff fff而不是fff。 (3对,可以压缩 只有3个值)

• 不使用十六进制颜色

• 不确定你的页面不会被破坏 当以150%-200%的缩放比例使用时。旧的 人们/几乎是盲人使用 互联网也是如此。

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

• 未验证标记/css

• 确保你的页面能很好地降级

• 称自己为CSS设计师, 不是设计样式表,而是 设计一个网站,通过实现 样式表。

• 使用绝对定位 去看别人的 电脑,某处)

• 不保持样式表整洁和 有组织的。别听这些 网站告诉你 一切都在一条线上,因为它 节省带宽。你应该留着它 你觉得最容易阅读的方式 然后修改,然后在 你完了。

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

忘了一个,我的错

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

(在他告诉我他希望他的网站看起来像他所在行业的领先公司的网站之后,我辞职了。这是一个很好的网站,甚至有一个原创的乐谱,当你通过画廊时播放。他给了我15美元/小时的工资(我上高中时),而且每周只让我工作9小时。)

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

body div a.mylinkclass { }

比

a.mylinkclass { }

不使用Firebug

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

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

不考虑Internet Explorer broken box model 在怪癖模式下。

不设置宽度 浮动 div S.

不层叠样式。

以下是 不 好:

body { color:#ff0; }

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

这将是 更好的

body { color:#ff0; }

h2 { text-decoration:underline; }

#ff0 如果不干扰某些其他样式定义,将自动应用。

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

• 使用不适用于高dpi屏幕的设备
• 不使用屏幕的全宽
• 不使用隐藏用户想要打印的内容以外的所有内容的打印样式表

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

.redLeftNewsHeader

而不是

.header

当你决定用蓝色主题重新设计你的网站时会发生什么?当您想在与新闻无关的项目上使用类时会发生什么?

使用“0px”而不是“0”。现在我觉得自己很擅长CSS,但有时我还是会这样做…

例子: “ padding: 0px “而不是” padding: 0 “

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

不考虑你的观众。

我不得不说,不正确地使用float,不理解collums。你可以很容易地把那种东西弄碎(个人经验),所以是的…漂浮的和透明的。

应用 font-size , font-family 或其他应应用于 block 水平到 inline 类元素 a 或 span .

要在使用此类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*/}

我知道这看起来很明显很基本,但我见过太多次了。 唯一一点你的 跨度 或 一 应操纵字体大小是一个特殊的CSS类,用于使事情看起来不同:

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

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

写piss糟糕的html