CMS编辑方案

Question

我只是想知道是否有一些方案是正确的方法，编辑 Wordpress、Joomla 等 CMS 的正确步骤。我所说的编辑是指 css、javascript。

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

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

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

Answer 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 ! -->

为什么片段二是红色的？

关键概念是CSS Specificity (article)，在CSS中经常被忽略。每个选择器都有一个 "value"（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 资产的压缩文件也是一个好主意。

CMS编辑方案

CMS editing scheme

javascript

css

content-management-system

frontend

overwrite