Question

我的页面如下：<div id="header">...</div><div id="navigation">...</div> similar for body and footer.

我想使用网格系统来设置页面的样式，所有这些似乎都依赖于根据他们的演示文稿给出提到的类。但我不想这样做（并且由于生成标记的方式不能这样做）

有没有办法做到这一点，而不只是在div上放一个课程？我可以将所需类的详细信息复制到一个样式表中，用id提及div，但这感觉不对。

编辑以澄清：

OP希望避免在HTML中添加class =“grid_3”等，但也不想添加#header {width：960px;保证金：0px; （我觉得还可以） - Rory Fitzpatrick 3小时前

确切地说，我不想在我的HTML中放置演示文稿信息，但我希望我不必将构成网格系统的css类分开，并应用相关部分（如margin：0px）和宽度：960px），因为从维护和重用角度来看这是不好的。

所以，我将看一个自动化系统来完成我需要的工作，除非你有一个答案，你如何使用css将css类应用于HTML元素，而不对该元素添加class =“blah” ？因为这对我来说似乎并不是一件疯狂的事情。

Answer 1

我不确定我理解这个问题。为什么不想将样式放在样式表中并通过id引用它们？

#header{
  position:relative;
  ...
}

Answer 2

如果你使用blueprint-css作为你的网格系统，你可以使用compress.rb将给定bp框架类的规则分配给你选择的特定选择器，如#footer或你有什么。例如，在你的项目中你可以拥有：

semantic_styles: # i dont think this is the right key definition but you get the idea
  '#footer,#navigation': ['span-12','clearfix']
  '#footer': ['push-1']
  # etc...

然后当您在项目文件上调用compress.rb时，它会将右侧选择器数组中的必要声明汇总到左侧的选择器中：

#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */} #footer {/* declarations from .push-1 */}

但总而言之，这对于将声明复制到您认为“错误”的单独文件的自动化至关重要。但我的意思是除此之外（自动或手动）我不知道可能的选项是什么。

Answer 3

我对网格系统有相同的保留意见，添加类名只是反对分离标记和样式（但通常会牺牲生产力）。

但是，我没有看到使用您自己的CSS设置正确的列宽和边距有什么问题。您可以拥有一个特定的site.grid.css文件，该文件仅包含网格的选择器和宽度/边距。我认为这是完全可以的，它只是一种使用CSS变量的方式。例如，所有3列元素都将出现在

下

/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
    width: 301px;
}

然后，您只需将选择器添加到CSS中，而不是将class="grid_3"添加到HTML中。

您可能需要考虑最初使用类名，直到您对布局感到满意为止，然后将其转换为CSS选择器。无论哪种方式最适合您的工作流程。

Answer 4

如果您无法访问标记，则必须复制样式，引用ID，或者您可以使用javascript将该类应用于ID？

如何在不修改元素的情况下将CSS类应用于具有给定id的元素？

4 个答案: