javascript - 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 中经常被忽略。每个选择器都有一个“值”(元素为 1，类为 10，id 为 100..)，这些值相加并与冲突规则进行比较。 应用得分较高的规则，即使该规则在代码中排在第一位也是如此。

特异性的例子:

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 资源的压缩文件也是一个好主意。