编写CSS时如何保持井井有条?

时间:2011-03-24 13:30:04

标签: css coding-style code-organization

  

可能重复:
  How to Manage CSS Explosion

我发现最困难的事情之一是保持我的样式表有条理。我通常从编写一个小的重置部分开始。然后我编写布局块,并在编写HTML块时继续逐步添加样式。

但在前两步之后,一切都变得一团糟。基于我的异想天开的HTML编码,样式会被添加,删除,遗忘,这经常被更改。我无法找到一种合理的方法来分类和分类我的CSS。

我发现自己为默认样式,导航和布局创建了单独的工作表。

在我写了页脚的CSS后,我无法弄清楚它是否应该进入默认样式表,导航样式或布局文件。它的容器当然是布局的一部分,它的导航菜单是部分导航,但它的样式应该进入基本样式表。我发现自己正在考虑相应地分离CSS,但这可能不对。

我找不到合理的方法将我的想法组织成有序的分类。

有人能给我任何见解吗?

4 个答案:

答案 0 :(得分:3)

虽然它不是您问题的直接答案,但您是否查看了less.js或其几个服务器端克隆?也许使用较少的样式代码可以使组织更容易。

答案 1 :(得分:2)

让我们从想要对网站布局进行一些更改的新程序员的角度来解决这个问题。

我不确定使用框架是否会使事情变得更好,更抽象,更多的学习曲线。

我认为您与组织的合作正确。

我通常创建一个default.css文件,其中包含默认字体,颜色,链接样式等的标记。在这个文件中,我会对网站进行处理,如果它是一大块带有嵌入图片的漂亮格式文本。此处没有<div>标记样式。通常这意味着内容的很多格式都在那里。但不是新闻页面上的那个特殊按钮,那个人就可以获得news.css

通常网站可以分为几个部分。页眉,页脚,侧边栏,首页,新闻页面,议程等。例如,如果页脚需要是红色的,那么很高兴看到文件footer.css确实包含背景颜色。

如果页脚中的链接样式与侧栏中的相同,请将样式声明放在两个文件中。如果页脚中的链接样式与主体文本相同,则会将其放在default.css中。尽量确保它首先是您作为新开发者的目标。

答案 2 :(得分:1)

就个人而言,我的xhtml输出有一些php-template-script。所以我的xhtml模板是在sepreate .tpl文件中。这些文件可以包含其他文件。所以可能有一个main.tpl包括开头的head.tpl和最后的foot.tpl,你必须在特定模板中编写页面的动态部分。

这通常已经完成,现在您可以简单地为每个模板分配样式表。所以有一个foot.css和一个head.css(您可以根据需要扩展它)。

这有助于我在设计网页时有一个清晰的海岸。

希望,这有帮助。

答案 3 :(得分:1)

您可以使用Compass:http://compass-style.org/

等框架简化CSS的某些部分

它允许您创建变量,mixins,并且总体上是您可以获得的大多数CSS问题的非常棒的解决方案。

还有其他解决方案,如LESS或其客户端等效LESS Js(http://lesscss.org/)