CMS编辑方案 [英] CMS editing scheme

问题描述

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

到目前为止，我一直在做的方式是创建文件custom.css和custom.js，然后将它们包含在head标签的结尾。现在我确定我的文件有优先级，并将覆盖所有现有规则。
在我的例子中，显然我们可以处理重复的代码。

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

什么是正确的方法来处理？什么是更常见的？什么是更好的方法这样做。

解决方案

没有理想的方法来处理这个问题，但是经验说，更容易在头部添加自定义文件，并从一个干净的开始，而不是抓取一个8000行文件，你不知道（通常不想知道）。

您学习CSS的第一件事是应用最新规则：

  p {color：red;} p {color：green;}  

 < p> Hello world！< / p><！ - 文字为绿色 - >   
 
 
 
但有时这似乎不起作用：
 
 
 
 
 
 
  body p { color：red;} p {color：green;}  
 
  < p> Hello world！< / p><！ -  Text is red  - >  
 
 
 
 
 
你最终使用！important，这不会远远不是一个坏主意：
 
 
 
 
 
 
  p {color：red;} p {color：green！important;}  
 
 < p> Hello world！< / p><！ - 文字是绿色的，但重要的是不好！ - >  
 
 
 
 
 
 
红色？ 
 
 
 
关键概念是  CSS特性（文章） ，这在CSS中经常被忽略。每个选择器都有一个值（元素为1，类为10，ids为100），并与冲突规则相比较。 分数较高的规则是应用的规则，即使规则排在代码中。 
 
 
 
 具体性示例
： 
 
 
 
 
 
  p {color ：红色;} / *特异性：1 * /＃wrapper p.intro {color：green;} / *特异性：100 + 1 + 10 = 111 * 1 = 11 * /。container p.intro {color：blue;} / *特性：10 + 1 + 10 = 21 * /   < div id =wrapperclass =container> < p class =intro> Hello world！< / p>< / div><！ - 文字是绿色的！ - >  
 
 
 
 
 
 
为了方便您精确选择器与您的开发工具，如果规则冲突只是添加一个选择器到声明，所以它获得了更高的特异性。 
 
 
 
个人提示：我喜欢在原始CSS文件中删除所有对font-family的引用，因为即使有特殊性也很难管理。
 
 
 
最后，生产站点拥有一个压缩文件收集所有CSS资源也是一个好主意。 
 
I'm just wondering if there is some scheme that is a proper way, proper steps of editing CMS like Wordpress, Joomla etc. 
By editing I mean css, javascript. 

The way I've been doing it so far is by creating files like custom.css and custom.js and then including them at the end of the head tags. Now I'm sure that my files has priority and would overwrite all existing rules. 
In my case it's obvious that we could deal with duplicate of code.

Is this better way of thinking rather than editing specific existing files?

what is the proper way to deal with that? What is more common? What is more preferable way of doing this. Or does my idea of doing it does not completely make sense.
解决方案
There is no ideal way to deal with this, but experience says it's easier to add a custom file at the bottom of the head and start with something clean rather than having to crawl in a 8000 lines file you don't know (and usually don't want to know). 

One of the first thing you learn about CSS is that the latest rule is applied : 



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

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





But sometimes this doesn't seem to work : 



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

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





And you end up using !important, which not far from always a bad idea : 



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

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





So how come snippet two is red ?

The key concept is CSS Specificity (article), which is often overlooked in CSS. Each selector have a "value" (1 for element, 10 for classes, 100 for ids..) that are added up and compared to conflicting rules. The rule with the higher score is the one applied, even if the rule comes first in code. 

Examples of specificity : 



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





So to make it easy you can grab the exact selector with your dev tool, and if a rule conflicts just add a selector to the declaration so it gains a higher specificity. 

Personnal tip : I like to strip all references to font-family in the original CSS file because it can be hard to manage even with specificity.

In the end, it's also a good idea for a production site to have a compressed file gathering all CSS assets.  

                        
这篇关于CMS编辑方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！