使用 CSS 类来库 HTML 有哪些策略？答案

【问题标题】：What are some strategies for using CSS classes to library HTML?使用 CSS 类来库 HTML 有哪些策略？
【发布时间】：2012-01-26 21:40:25
【问题描述】：

我正在开发一个 HTML 组件库。底层技术不相关；每个组件的代码只生成最终发送到浏览器的 HTML。

我遇到的问题是很多生成的 HTML 需要由应用程序设置样式。而且我不提前确切知道这种样式可能是什么。此外，生成的 HTML 往往有多个 div 和 span，每个的样式可能不同。想一想日历组件之类的东西以及可能设置样式的所有不同方式。

起初我以为我只是为每个重要的元素分配一个类。我在所有类名前加上“foo”（我的库的名称），因此日历组件的 div 具有类 foo-calendar。但在组件内部，我开始怀疑这种方法，因为我不得不为构成每个 div 的所有各种 div 编造奇怪的名称。如果组件中只有一个特定类型的标签怎么办？即使它没有添加任何额外的含义，我是否仍然给它一个类？

我开始认为我只会添加足够的类来唯一标识每个标签。因此，如果组件中只有一个输入字段，我根本不会给它一个类，因为 CSS 选择器“.foo-calendar input”会找到它。但这种方法似乎有点过于主观了。

我的另一个问题是，我是在所有类名前面加上我的库名，还是只在“顶级”类前面加上前缀？还是我嵌套类名？换句话说，如果日历具有类 foo-calendar，那么月份显示是否具有类“月”或“foo-month”或“foo-calendar-month”？

您遵循哪些策略将 CSS 类分配给库 HTML？

【问题讨论】：

谁来设计它们？我认为规范是由您创建 CSS 和 HTML，从而使您能够控制和了解需要类的位置以及何时不需要。
你在谷歌上搜索过“面向对象的 CSS”吗？
如果我正在生成 CSS，那么一切都会好起来的：我只需添加尽可能多的类来完成我需要的样式。但我正在编写其他开发人员将在尚未定义的 Web 应用程序中使用的组件。当然，为未知需求设计东西是浪费大量时间的好方法。所以我想做的是想出一个我可以遵循的策略，让这些其他开发人员在大多数情况下根据他们的要求设计他们的应用程序，而我现在不必投入大量时间。跨度>
"OOCSS:" 不，但我现在就去做。谢谢！

标签： html css

【解决方案1】：

如果你添加一个重置声明，你不需要为所有的类名添加前缀。您会在几个 css 框架中找到合适的 reset-css。

正如您在第 4 段中所述，我会尽可能少地为您的元素使用类（并且不使用 ID）。

当然，如果你这样做，你的 css 选择器会变得很长 - 但也许你可以使用 SASS/SCSS 来防止完全混乱 ;-)

【讨论】：

我不需要 reset.css，因为我不是在编写应用程序，而是在编写库。我必须假设该应用程序将拥有自己的 div、span、输入等以及自己的不属于库的类。
好的，但是应用程序会在您的库元素中添加代码吗？他们会在
元素中写东西吗？如果没有，您可以添加第二个类，它仅为这个“小部件”及其内容分配重置定义。

【解决方案2】：

我建议研究 OOCSS（面向对象的 CSS）。

代码 - https://github.com/stubbornella/oocss

简介-http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/

我个人喜欢这种方法，因为它感觉更容易在页面上设置元素样式。

评估页面样式的基本理念，然后创建一些可在整个网站中应用的通用类。有时我会变得非常细化，我会创建一个像 .bold {font-weight:bold} 这样的类，但大多数时候不应该这样做。另一个关键思想是分离 CSS 结构（网格、定位等）和样式（颜色、字体粗细、背景等）。这样做是为了提高可维护性。

如果您发现小部件样式的共同主题，则将其分解为一个类并根据需要应用。例如，在整个网络中，都有左侧图像和右侧文本的元素。在此处的问题底部查看您的 SO 签名。这可以被制成一个通用类，可以应用于任何小部件的实例，左侧是图像，右侧是文本。

【讨论】：

【解决方案3】：

我会说更多的类更好（使 css 选择更容易），并将它们全部命名（以避免冲突），但我正在想象一个 WordPress 插件或我可能想要插入现有网站的模块化东西.

我真的很喜欢 Gravity Forms 构建其 html 类的方式，因为它使我可以轻松地调整和自定义，而无需触摸标记，所以如果这就是您要寻找的，不妨看看他们的 CSS导游：http://www.gravityhelp.com/gravity-forms-css-visual-guide/

【讨论】：