Question

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

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

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

处理这个问题的正确方法是什么？什么更常见？这样做的更好的方法是什么。或者我这样做的想法并不完全有意义。

Answer 1

没有理想的方法可以解决这个问题，但经验表明，更容易在头部底部添加自定义文件并从干净的东西开始，而不必在8000行文件中抓取知道（并且通常不想知道）。

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

＆＃13;

p {color: red;}
p {color: green;}

＆＃13;

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

＆＃13;

但有时这似乎不起作用：

＆＃13;

body p {color: red;}
p {color: green;}

＆＃13;

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

＆＃13;

你最终使用了！important，这总是一个坏主意：

＆＃13;

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

＆＃13;

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

＆＃13;

那么为什么片段2是红色的呢？

关键概念是 CSS Specificity (article) ，这在CSS中经常被忽略。每个选择器都有一个＆＃34;值＆＃34; （1表示元素，10表示类，100表示ID ..），它们被加起来并与冲突的规则进行比较。 分数较高的规则是应用的规则，即使规则在代码中排在第一位。

特异性的例子：

＆＃13;

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 */

＆＃13;

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

＆＃13;

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

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

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

CMS编辑方案

1 个答案: