How do I avoid duplicated code in Css using Scss?

Question

Is there a way to avoid the same code in all css files to keep the app as fast as possible? For example, the heading in every page comes from a headings.scss file and that means that the code for the heading is in every css file. And if the css files are going into a one page, that code will be duplicated multiple times if I´m not manually deleting the lines one by one.

Is there a way to avoid this?

Update: I have one css file for every html file and that css is mapped from a sass file. The sass files use global styling like headings.scss, buttons.scss etc. When the css files are created, every file has those five lines of styling for a button, which means that if I have a button in every page (say 20), there will be 20 blocks of the exact same code in a project.

Now a developer is using my code and he created a onepage for html and one for css. When he imports the css files into one, the button code will be 100 lines (20 duplicates). Is this just the way it has to be without spending time to manually delete 19 blocks or is it a better/standard/smart way to do this? Without changing everything I´ve done so far and keep the organized file structure?

Answer 1

i just can show you what i generally do and how i do structure it

1 - I have all my scss file being imported once in to a main scss file

src -> scss -> bundle.scss

// 1.1 - base
@import "./base/vars";
@import "./base/reset";
@import "./base/structure";
@import "./base/header";
@import "./base/footer";

// 1.2 - navs
@import './components/primary_nav_header';
@import './components/primary_nav_sidebar';

// 1.3 - templates
@import "./templates/home";
@import "./templates/products";
@import "./templates/products-single";
@import "./templates/search-results";
@import "./templates/contact";

// 1.4 - components
@import "./components/buttons";
@import "./components/hamburgers";
@import "./components/hero";
@import "./components/cards";
@import "./components/breadcrumb";

2 - And then all this will be compiled into a tyni single main css minified file in

dist -> css -> bundle.css

3 - then just import it

<link rel='stylesheet' href='./dist/css/bundle.css' type='text/css' media='all' />