我正在开发一个HTML组件库。基础技术不相关;每个组件的代码只生成最终发送到浏览器的HTML。
我遇到的问题是应用程序需要为很多生成的HTML设置样式。而且我不知道提前确切的样式是什么。此外，生成的HTML往往具有几个div和span，每个div和spans的样式可能不同。想象一下日历组件以及可能的样式的所有不同方式。
起初我以为我只是为每个非平凡元素分配一个类。我用“foo”（我的库的名称）为我的所有类名添加了前缀，因此日历组件的div具有类foo-calendar。但是在组件内部我开始怀疑这种方法，因为我不得不为构成每个组件的所有各种div组成奇怪的名称。那么组件中只有一种特定类型的标签呢？即使它没有增加任何额外的含义，我还是会给它上课吗？
我开始认为我只会添加足够的类来唯一标识每个标记。因此，如果组件中只有一个输入字段，我根本不会给它一个类，因为CSS选择器“.foo-calendar input”会找到它。但这种做法似乎有点过于主观。
我的另一个问题是，我的所有类名前缀是我的库名，还是只有“顶级”类？或者我是否可以嵌套类名？换句话说，如果日历具有类foo-calendar，那么月份显示是否具有“月”或“foo-month”或“foo-calendar-month？”类
您将CSS类分配给库HTML有哪些策略？
答案 0 :(得分：1)
我会说更多的类更好（使css选择更容易），并将它们命名为all（以避免冲突），但我想象一个WordPress插件或模块化的东西，我可能想插入我现有的网站
我非常喜欢Gravity Forms构建他们的html类的方式，因为它使我可以轻松调整和自定义而无需触摸标记，所以如果你正在寻找它，那么可以看看他们的CSS指南：http://www.gravityhelp.com/gravity-forms-css-visual-guide/
答案 1 :(得分：0)
如果添加重置声明，则无需为所有类名添加前缀。你会在几个css框架中找到一个合适的reset-css。
我会尽可能少地为你的元素使用类（并且不使用ID），正如你在第4段中所描述的那样。
当然，如果你这样做，你的css选择器变得非常长 - 但也许你可以使用SASS / SCSS来防止完全混乱; - ）
答案 2 :(得分：0)
我建议调查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签名。这可以被制作成一个通用类，可以应用任何小部件实例，左侧是图像，右侧是文本。