CMS Editing Scheme

Question

I'm just wondering if there is some kind of scheme that is the right way, the right CMS editing steps like Wordpress, Joomla, etc. By editing, I mean css, javascript.

So far, I have done this by creating files such as custom.css and custom.js, and then include them at the end of the headers. Now I am sure that my files take precedence and will overwrite all existing rules. In my case, it is obvious that we can deal with duplicate code.

Is this a better way of thinking than editing certain existing files?

What is the right way to handle this? Which is more common? What is the preferred way to do this. Or my idea of ​​doing this is not entirely clear.

Answer 1

There is no ideal way to handle 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 crawl into 8,000 lines of a file that you don’t know (and usually don’t want to know).

One of the first things you learned about CSS is that the last rule applies:

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

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

Run code

But sometimes this does not work:

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

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

Run code

And you end up using! it is important that far from always has a bad idea:

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

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

Run code

So, how come that two fragments of red?

CSS (), CSS. "" (1 , 10 , 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 ! -->

, , dev, , , .

: CSS, .

, , , CSS.