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資源的壓縮文件。