CMS editing scheme

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.