5 CSS常见错误

九游会客户端——2011年3月1日星期二

正如所承诺的, 这周我继续我的常见错误列表, 而是从HTML转移到CSS领域. 规则与CSS稍有不同, 您将看到, 但我仍然不会告诉你们，你们不应该仅仅因为我个人的喜好就使用完全有效的练习.

1. 只有一个字体选择

   当使用font-family属性时，您应该 总是 用一个通用家族结束-如“serif”，“sans-serif”，“monospace”. 这样，如果用户没有任何你想要使用的特定字体, 至少他们会看到类似的字体. 另外一个好主意是加入一些特定的字体——一个PC版本和一个Mac版本, 例如. 这两个平台通常使用相似的字体，但不是完全相同的字体.

2. 避免测试CSS3

   有些人建议避免使用非标准的CSS3属性, 或者特定于浏览器的测试版, 如-webkit-transform, -moz-transition, 和文本阴影. 理由通常包括两点——你的CSS无法验证, 对于不支持这些属性的浏览器，体验将有所不同. 虽然你的CSS在技术上是无效的，但这实际上不是什么大问题. 与HTML, 在哪些地方无效元素会导致严重的问题, 用CSS, 不支持这些属性的浏览器将简单地忽略它们. 有些浏览器无法看到这些属性的效果，这也是事实, 但只要它们不是必需的, 为什么不给支持css3的浏览器的用户一些额外的修改呢, 而不是剥夺每个人的权利?

3. 依赖beta CSS3

   另一方面, 您不希望使用CSS3属性或值，以免破坏其他浏览器的体验. 例如, 使用HSLA颜色值而不使用回退会导致许多浏览器对这些属性使用默认颜色. 在我看来，这是非常不幸的, 因为它基本上消除了更直观的颜色修改的好处, 但几年后, 只有非常过时的浏览器不支持它, 这才是真正带来好处的时候.

4. 滥用类/ id

   这部分是HTML部分是CSS, 但通常是因为想要添加CSS钩子, 所以我认为它在CSS方面有所下降. 我经常看到的一件事是，每个段落或每个列表项目给出相同的类. 一般, 您希望使用“p”选择器以相同的方式设置所有段落的样式, 然后将类添加到异常中. 如果你必须在每个段落都有一个类来保持风格一致, 你使得维护你的代码变得更加困难——特别是当你使用WYSIWYG编辑程序或者CMS的时候. 另一个问题是将id当作类来使用. 任何给定的ID在HTML文档中只能使用一次. 如果有几个元素需要以相同的方式样式化，请使用元素选择器或类.

5. 不使用简写属性

   这不会破坏任何东西，但它会使您的CSS变得不必要的大和更难管理. 宣布边框宽度, 边框颜色, border-style单独添加额外的行，与使用“border”简写属性设置所有三行相比，增加了错误的机会. 类似的, 使用它们各自的“上-右-下-左”属性设置padding或margin等内容(除非您只更改其中一个属性)也是无关紧要的.

我想提几个更基于偏好的建议. 我见过一些人建议不要使用颜色名称, 声明“color:red;”告诉浏览器呈现它“认为红色是什么”.而这可能在一定程度上适用于浅色、金色、黄色和中绿色等颜色, 我还没见过哪个浏览器把红色渲染成#F00，或者把白色渲染成#FFF. 在我看来，使用颜色名称提高了可读性. 我不同意的另一个主要技巧是使用无单位0表示维度. 而0的值确实与0px或0%或0em相同, 我同意我所见过的人的断言，即在所有属性上维护单元可以提高可读性，并使以后更改值更容易. 对于每次一个或两个字符，我真的不担心额外的文件大小.

九游会客户端
九游会客户端是一家全方位服务的创意机构 网页设计, 打印, 身份, 品牌, 界面设计, 视频制作, 静止摄影 和 运动设计. 利用我们对卓越的热情，多元文化背景，还有 获奖 实践, 我们一直提供高质量的服务, 自定义, 以创新的解决方案满足客户多样化的市场需求. 欲了解更多信息，请访问 www.MatchaDesign.com.