CMS编辑方案

Posted 2023-02-21

【中文标题】CMS编辑方案

【英文标题】：CMS editing scheme

【发布时间】：2015-06-27 04:48:54

【问题描述】：

我只是想知道是否有一些正确的方法，编辑 CMS 的正确步骤，如 Wordpress、Joomla 等。 通过编辑我的意思是css，javascript。

到目前为止，我的做法是创建 custom.css 和 custom.js 之类的文件，然后将它们包含在 head 标签的末尾。现在我确定我的文件具有优先权并且会覆盖所有现有规则。 就我而言，很明显我们可以处理重复的代码。

这是比编辑特定的现有文件更好的思维方式吗？

处理这个问题的正确方法是什么？更常见的是什么？这样做更可取的方法是什么。还是我这样做的想法并不完全合理。

【问题讨论】：

你的方式确实有意义，走安全路线。但是，请注意，如果您要添加新的 CSS 文件而不是编辑现有的 CSS 文件，则可能会忽略特定性问题。如果你写了 #mydiv color:red 但原来的 CSS 有 #mypage #mydiv color:lime 你的 CSS 将没有优先权！

顺便说一句，你最好把这个问题改成“什么是正确的方法”而不是“你们怎么看”，否则会有被关闭的危险。跨度>

【参考方案1】：

没有理想的方法来解决这个问题，但经验表明，在头部底部添加一个自定义文件并从一些干净的东西开始会更容易，而不是不得不爬进一个你不知道的 8000 行文件（而且通常不想知道）。

你了解 CSS 的第一件事就是应用了最新的规则：

p color: red;
p color: green;

<p>Hello world !</p>
<!--Text is green -->

但有时这似乎不起作用：

body p color: red;
p color: green;

<p>Hello world !</p>
<!--Text is red -->

你最终会使用 !important，这并不总是一个坏主意：

body p color: red;
p color: green !important;

<p>Hello world !</p>
<!-- Text is green but !important is bad ! -->

那么sn-p二怎么是红色的呢？

关键概念是CSS Specificity (article)，它在 CSS 中经常被忽视。每个选择器都有一个“值”（1 代表元素，10 代表类，100 代表 ids..），它们被相加并与冲突规则进行比较。 应用得分较高的规则，即使该规则在代码中排在第一位。

特异性示例：

p color : red;
 /*Specificity : 1 */

#wrapper p.intro  color : green;
 /*Specificity : 100 + 1 + 10 = 111 */

.container p color : orange;
 /*Specificity : 10 + 1 = 11 */

.container p.intro  color : blue;
 /*Specificity : 10 + 1 + 10 = 21 */

<div id="wrapper" class="container">
  <p class="intro">Hello world !</p>
</div>
<!-- Text is green ! -->

因此，为方便起见，您可以使用开发工具获取准确的选择器，如果规则冲突，只需在声明中添加选择器，以获得更高的特异性。

个人提示：我喜欢删除原始 CSS 文件中对 font-family 的所有引用，因为即使有特殊性也很难管理。

最后，对于生产网站来说，拥有一个收集所有 CSS 资产的压缩文件也是一个好主意。