覆盖项目中的JavaScript / HTML / CSS /等文件

Question

I'm trying to build a web library that is supposed to be an infrastructure to my other projects.
In those other projects I'll be overriding some of the scripts, styles and other components, but some of the functionality should stay the same and not be overriden. I'd like NOT to copy all the files to every project, but packing them and extracting the files in production will be ok.

What is the best/standard way to do it?

Answer 1

This may help: Mozzila Web Developer Website or may overriding a style rule in CSS:

 a { color: white; color: red !important; display: none; display: flex !important; } 

 <a href='https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS'>Mozzila Test</a> 

btw if you want to override Files:

 <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="overrided.css" /> 

Answer 2

That's the way you work with other frameworks like Bootstrap and Foundation. The order in which you load your css files into html lets the latter overwrite the former, if there are rules of same or higher specificity.

So just create your base styles and then load overrides:

<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="overrides.css">

Answer 3

For example

 .button{ padding : 12px 6px !important; color : #434343 !important; margin : 1em 3em !important; } 

It works everywhre via !important that browser only must use these properties in all same name classes . If you use this with other css framework , you need to put tour CustomCss under bootstrap css's.

ANOTHER SOLUTION

USE SASS OR LESS