如何将撇号样式与前端模板分开答案

【问题标题】：How to separate Apostrophe syles from the front end template如何将撇号样式与前端模板分开
【发布时间】：2017-09-25 07:12:48
【问题描述】：

我不断遇到前端 CSS 样式和 Apostrophe 自己的样式之间的冲突。例如，在我添加模板撇号表单输入字段后，现在全部大写，对齐全部关闭。有没有推荐的方法将它们分成不同的范围？提前致谢。

【问题讨论】：

您能否提供更多细节，或者更好的是，提供一个 github 项目，我们可以在其中看到有问题的表单？我们的表单样式仅限于 apos-ui，不应影响您自己的表单。除非您实际使用我们的表单宏，在这种情况下您选择使用这些样式，是的。
这是原型。现在它都是静态的（每个页面都有单独的模板），因为它是一个典型的小型站点项目，内容是临时创建的。一旦我们完成页面布局，我会将可编辑区域转换为小部件以利用 Apostrophe。 github.com/uncircled/dsm 分阶段版本位于 destination-spa-management.com (admin / snow2water) 我在 stie.less VadimG 中导入所有主题样式，我怀疑您是对的，并且某些主题样式在全球范围内必须经过并减少那个范围。
github URL 是一个 404 FYI。
对不起，忘了这是一个私人仓库。如果你给我发你的电子邮件，我可以加你。
tom@punkave.com

【解决方案1】：

这对于 CMS 来说是一个非常常见的问题，而不仅仅是 Apostrophe。就个人而言，我养成了将所有 CSS 和 JS 文件的范围限制在它们所引用的模块范围内的习惯，从那时起我就再也没有遇到过任何问题。

即我有一个名为 widget 的模块，我将它包装在一个具有类“widget”的元素中。这使我可以将我的 css 范围仅限于那个“.widget”。幸运的是，使用 BEM 和更少可以在公园里散步。

【讨论】：

这通常是 Apostrophe 团队开发客户项目的方式。在全局范围内很少/没有，并且围绕小部件和富文本之类的东西非常严格的范围和容器（我们使用 ITCSS，所以这些主要是对象和组件）