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

而且你最终使用很重要，它不远处总是一个坏主意：

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代表类，100代表ID），它们相加并与冲突规则进行比较。 即使规则在代码中排在第一位，分数较高的规则也是应用的规则。特异性

例子：

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资源的压缩文件。