10个最佳CSS实践,以改进代码

WebDesignerDepot员工 经过 WDD员工  |  可能。 20,2009年

It’真的很容易发现自己想知道你的CSS如何变得如此混乱。

有时它’S从一开始,有时它的邋paty编码的结果’因为多个黑客和变化 time.

无论原因是什么,它都没有’不得不这样的方式。写清洁,超级可管理的CSS很简单,当您在右脚开始时简单,使您的代码更容易稍后维护和编辑。

这里有11个提示加快过程,编写更苗条的CSS,更快,更少可能让您发出头痛。

 

1.保持组织

就像其他任何东西一样,它可以让自己组织起来。按照他们想到的顺序,使用相干结构而不是随意地丢弃ID和课程。

它将帮助您牢记CSS的级联部分,并将您的样式表设置为利用风格继承。

首先声明您最通用的项目,然后是Not-So-Generic等。 这使您的CSS适当地继承属性,并使您需要更容易覆盖特定样式。在编辑CSS时,您将更快地编辑CSS,因为它将遵循易于阅读,逻辑结构。

使用最适合您的结构,同时保留未来的编辑和其他开发人员。

  • 重置和覆盖
  • 链接和类型
  • 主要布局
  • 二级布局结构
  • 表格元素
  • 各种各样的

 截屏

 

 

2.标题,日期和标志

让别人知道谁写了你的CSS,当他们被编写而且如果他们对此有疑问,请联系。在设计模板或主题时特别有用。

 截屏

等一下… what’s that bit about 样子颜色 ?多年来,我’发现,在初始开发期间添加我样式表中使用的常用颜色的简单列表非常有用,并且在稍后制作编辑时。

这将节省您必须打开Photoshop以从设计中拍摄颜色,或在网站上查找颜色’s 时尚指南 (如果有一个)。当您需要该特定蓝色的HTML代码时,只需滚动并复制它。

 

3.保留模板库

一旦您’ve解决了一个使用的结构,剥去了一切isn’t通用并将文件保存为CSS模板以供以后使用。

您可以为多个使用提供多个版本:双列布局,博客布局,打印,手机等。 结尾 (OSX的编辑)有一个很棒的 剪辑 允许您轻松执行此操作的功能。许多其他编辑器具有类似的功能,但即使是简单的文本文件也会很好地工作。

It’疯狂重新编写每个和每张风格的纸张,特别是当你的时候’重新使用每个相同的约定和方法。

 截屏

 

 

4.使用有用的命名约定

你会发现上面我声明了几个列ID的地方,我打电话给他们col-alpha和col-beta。为什么不只是称他们为left和col-over?想想未来的编辑,总是。

明年您可能需要重新设计您的网站并将其左列移动到右侧。您不必重命名HTML中的元素,并重命名样式表中的ID以更改其位置。

当然,你可以重新定位左列向右,并将身份证保留为#Col-left,但这是多么令人困惑?如果id说左,则应该期望它永远在左侧。这不会让你在以后留下更多的空间。

CSS. 的主要优点之一是能够将风格与内容分开。只需修改CSS,您可以完全重新设计您的网站而不触摸HTML。所以 不要使用限制名称解除您的CSS。使用更多功能的命名约定并保持一致。

留出您样式和ID的位置或样式特定单词。一类.Link-Blue将为您提供更多工作,或者当客户端后来要求您将那些蓝色链接更改为橙色时,让您的风格表确切地说。

根据他们的内容命名您的元素,而不是它们的样子。 例如,.Comment-Blue比.comment-Beta更容易多才多全。.post-lightfont比.post-title更加限制。

 

5.连字符而不是强调

较旧的浏览器喜欢在CSS中与下划线的界面进行诙谐,或者根本不支持它们。为了更好的向后兼容性,养成使用连字符的习惯。使用#col-alpha而不是#col_alpha。

 

6.不要重复自己

通过分组元素可以重新使用属性,而不是再次声明样式。如果您的H1和H2元素都使用相同的字体大小,颜色和边距,请使用逗号进行组。

这:

 截屏

您还应该尽可能使用快捷方式。始终在景点上获取组件和使用声明快捷方式的机会。

您可以完成所有这些:

 截屏

只有这样:

 截屏

您了解CSS解释这些快捷方式的顺序非常重要:顶部,右侧,底部,左。从中午开始一个大的顺时针圈。

此外,如果您的顶部和底部,或左右属性是相同的,则只需使用两个:

 截屏

这将顶部和底部边缘设置为1EM,左侧和右边缘到0。

 

7.优化轻质风格床单

使用上述提示,您可以真正减少风格表的大小。较小的负载更快,更小更容易维护和更新。

通过分组,删除您不需要并在可能的情况下整合。使用CANSC CSS框架时,请小心。你可能会继承很多不会被使用的批量。

SLIM CSS的另一个快速提示:使用零时,您不需要指定测量单位。如果边距设置为0,则不需要说出0px或0EM。无论测量单位如何,零是零,并且CSS了解这一点。

 

8.写下您的Gecko基础,然后为WebKit调整,即

保存自己故障排除头痛,首先为壁虎浏览器(Firefox,Mozilla,Netscape,Glock,Camino)编写CSS。如果您的CSS与Gecko正常工作,那么WebKit(Safari,Chrome)和Internet Explorer中的问题就会更有可能。

 

9.验证

利用 W3C.’s free CSS validator。如果你’重新卡住,你的布局是’要做你想要的事情,CSS验证器将在指出错误方面是一个很大的帮助。

 

10.保持整洁的房子

将特定于浏览器的CSS分开到自己的单独样式表,并根据需要包含JavaScript,服务器端代码或 条件评论。使用此方法避免主样式表中的脏CSS黑客。这将使您的基础CSS保持清洁和可管理。


 

独家为WDD写的Jeff Couturier

您在编码网站时遵循这些方法吗?您使用什么其他技术来创建更好的代码?