[Return]

Report a post

Preview
To explain further, the goal is to reduce the amount of duplicated/conflicting CSS - such as having "padding: 2em" in every single alternative stylesheet because it's not found in base.css

Equally, it's to prevent situations where the same CSS is reduntantly included in both base.css and the alternative stylesheets, or only found in some stylesheets but not others. This makes it much easier to create new stylesheets, and maintain old ones when new features are added

When you have a situation like:
base.css
.item {
padding: 8px;
}

custom.css
.item {
background-color: #eeeeee;
}

...what will happen is that ".item" will have both padding and background-color applied. Even if something is only featured in the earlier file, it will not be removed when the later file is loaded. They effectively stack together, and you can keep adding to a selector across different files or different sections of the same file

However, when you have a situation like:
base.css
.item {
background-color: #c1b2a3;
padding: 8px;
}

custom.css
.item {
background-color: #eeeeee;
}

...the background-color found in the latter file will override the value set in the first file (though the value in the first file will be used until the second file is loaded). The padding will remain active throughout since it wasn't overridden in custom.css
Post number No.67086
Board Site Discussion@Heyuri
Optional. Describe what's wrong with it.