我正在制作一个网站,使用了:MODx、SASS、Bourbon & Neat、jQuery、Bootstrap、Velocity 和其他一些小库。使用的IDE是PhpStorm,所有文件都是utf-8编码,无BOM;它还包括来自 3rd 方资源的搜索表单,其中一些放在 iframe 中,还有一些是“本地的”,具有标准的 html 表单。所以,命名 hell 临近了,我还没有建立任何标准化的 CSS 命名约定,如 BEM、SMACSS 等,只是一些常见的好的 CSS 推荐(低嵌套级别、精细语义、无处不在的 .class 选择器)
我要搬到BEM ,并寻找命名空间,但我不想坚持下去,因为这是我的第一个 BEM CSS 元素,我不能 100% 确定我会在所有方面都表现良好,而且我'在进行任何全局操作(重命名,也许是其他操作)时,我害怕破坏某些东西。所以,我想使用非标准符号组合,比如 ☺☻ 或 ♥♦♣♠ 或其他任何东西。这应该是 100% 不来自第 3 方的任何元素的库。之后,我可以使用例如 Grunt regexp 或自定义后处理应用程序,将这些字符替换为普通命名空间名称,或者根本没有命名空间(不错,小红利)。我不会让这些符号保留在生产代码中。 Apache、PHP、SASS 解析器和浏览器将接收“正常”代码。这些符号将仅对“Devend”元素“可见”——Grunt、PhpStorm 等。
但是,我从来没有在互联网上看到任何文章和作者推荐这种方法。因此,看起来它存在主要问题。有吗?
已添加:这些问题是什么?
PS:我知道,许多现代浏览器都可以使用 CSS 类名称的 unicode 符号(就像 Java 允许函数/变量/等名称使用 unicode 符号一样),因此,理论上我可以保留它们照原样,但出于同样的原因,它对我来说看起来不太好:从未见过有人这样做/建议这样做。
最佳答案
经过一些研究,我整理出了正确的问题和答案:
在为元素选择CSS命名空间名称时,使用BEM命名约定,如何避免以后的麻烦。
CSS 类命名的一个常见良好做法是使用全部小写 字母。也许,在某些命名方法中,规则可能不同,但在 BEM 中,必须全部使用小写字母。所以我可以使用带有几个破折号的大写字母,比如 NS--。我自己的代码足够集中,可以准确定义 Grunt 或 PhpStorm 等的搜索/替换范围。我可以继续开发我的标记,而不必为将来的问题烦恼。一个主要优势是即使没有预处理/后处理它也能工作,这只是与 BEM 一起使用的一个很好的约定在我的例子中。
下一个挑战是如何处理 php 和 js 中的组合类名/选择器字符串。在这里,第一部分(static 标记)的解决方案并不限制如何解决这个问题的“dynamic 部分”。而这里我们也可以通过在PHP和JS中引入变量来避免前/后处理。
我喜欢预处理器/后处理器,但在这种情况下我们可以避免使用它们真是太好了,因为它实际上是一个命名约定问题,而不是工作流程增强问题,这是网站管理员的前/后处理工具的主要目的。
关于css - 用不寻常的字符模板化 css 伪命名空间,然后后处理为正常字符。任何缺点/完全不允许的问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32297695/