Appending classes to a CSS framework

[dresden_phoenix]

I was hoping maybe someone knows an obscure, seldom use technique or hack, if not at least confirm if this is even possible to do with plain CSS.

Say you had a style pre constructed CSS framework ( or simple style sheet , whichever is easier to visualize ). You cannot edit the original file!

Is there way to append /inherit rules from the framework in a subsequent stylesheet.

EXAMPLE:
if the framework contained the following:

.cols-1,.cols-2,.cols-3,.cols-4 {
 	flex-grow: 1;
 	flex-shrink: 1;
 }

.cols-1{
 	flex-basis:  8.333%
 	background: cyan;
}

.cols-2{
 	flex-basis: 16.67%
 	background: orange;
}
.cols-3{
 	flex-basis: 25%
 	background: pink;
}
.cols-4{
 	flex-basis: 33.3333%
 	background: tan;
}
.cols-5{
 	flex-basis: 41.67%
 	background: blue;
}
.cols-6{
 	flex-basis: 50%
 	background: gray;
}

and my custom style sheet would reference selector/declaration pair definitions in that sort of like:

.main-content,.side-bar
(.cols-1,.cols-2,.cols-3,.cols-4 {
 	flex-grow: 1;
 	flex-shrink: 1;
 }) /*** .main-content and .side-bar is treated as if i had gone to the framework  document and added the selector  to those rules **/


.main-content,(
.cols-6{
 	flex-basis: 50%
 	background: gray;
})/*** .main-content  is treated as if i had gone to the framework document and added the selector  to those rules **/



.main-content,(
.cols-3{
 	flex-basis: 25%
 	background: pink;
})/*** .side-bar is  treated as if i had gone to the framework document and added the selector  to those rules **/

BTW, I dont mean would re-write the declaration over in the custom stylesheet; I mean that, for example, .main-content would inherit all the properties declared in those instances in the framework CSS. Hopefully that makes sense.

As always, I appreciate any insights shared.

[DaveMaxwell]

You can reference all the selectors you want, but there’s no way to “attach” another selector to a pre-defined selector. But selectors are individualized, and additive to the html elements. There’s no class type inheritance available between css selectors

Ironically, this falls under the same reasoning from the discussion we had in the inheritance thread, which you participated in

[PaulOB]

@dresden_phoenix

main-content would inherit all the properties declared in those instances in the framework CSS. Hopefully that makes sense.

You can’t do that in vanilla css but you can do something similar in SCSS and extend the original rules into your new class.

e.g.

The .my-cols-4 class is used in the html but extends the .cols-4 class already defined above.

When I use bootstrap I just use the basic column classes but avoid all the utility classes as its easier to write your own css in one rule rather than writing ten inline classes in the html. I hate it when I see <div class="cols-4 d-flex flex-row-reverse bd-highlight mr3 flex-xl-column-reverse mt-0 px-2 wtf">

[dresden_phoenix]

@DaveMaxwell
Yes, I remember. And I was thinking about that right after I hit post.

@PaulOB

I hate it when I see <div class="cols-4 d-flex flex-row-reverse bd-highlight mr3 flex-xl-column-reverse mt-0 px-2 wtf">

Yah me too. Which how I got started thinking what would a solution. Altering the source SCCS file could be one answer, however my concern would be be that if you hand the project down to someone, and they reload or update their version of Bootrap they are not gonna have a good day. lol.

Still, the SCSS rout seems like the only option…I will have to toy with it to see if I could aggregate rules:

.my-cols-4 {
  @extend .cols-4;
  @extend .mt-4;
  @extend .bg-info;
}```

[dln]

As others have mentioned you can’t “inherit” from other selectors in plain ccs, but you can in sccs which has a directive to do so.

However it all comes down to specificity. In addition to overriding some css properties a later rule using the same selector, you can also override some css properties using a different selector - you just need to use both the original and custom one in combination, either in the same tag with multiple classes or an id and a class or some other way of selecting the block, or somewhere in the hierarchy where the desired properties are required.

It is worth mentioning you can use !important, although that is probably not advised. I have had to use it on rare occasions where the alternative was too brittle or led to complexities.

/d