Using a lot of style sheets. Needing opinions on how to move forward efficiently

Question

I'm new to web development and am developing a website using bootstrap. I've got quite a few .css files that involve bootstrap, an open source bootstrap theme, some style sheets for the plugins I'm using and etc. Thing is, I feel like I'm doing the same thing over and over again, putting a lot of overhead on things. For example, this is how the styles on the web page I'm developing currently operate:

1. Bootstrap default theme is loaded
2. Bootstrap custom theme is loaded, overrides the majority of the default bootstrap css configurations
3. My own custom css file is loaded, overrides the majority of the custom theme css configurations

I guess it's worth mentioning that my custom css file only overrides colours and borders.

I'm thinking if the theme is open source, should I just edit the theme itself? Or should I still be editing everything within my own custom css file?

Again, I'm very new to web development so apologies if this is quite a silly question. Optimisation is key for me, though. After the development stage I will combine the CSS files using bundles provided by the Microsoft.NET optimization package.

Answer 1

Never modify a library directly (css, js, php etc.). What if a new version come out, fixing some bugs. You can not download it, because it will override all your fabulous work. You get the right process right now. Import your libraries, then override them with you own file and lines of codes.

In your case, it does not matter at all the number of files you are importing, because you will combine and minify them. If you really care about performances, I suggest you to look at the "CDN" systeme, for Bootstrap or jQuery it could be interesting and provide some good benefits.

Look at this question and the answers, they will give you some good hints : Single huge .css file vs. multiple smaller specific .css files?