Inherit CSS Class

Can a CSS class inherit one or more other classes?

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */
#header {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#footer {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

You could say

/* LESS */
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners;
}

How do you make a css class inherit all values from another class without changing the original class

There is no way to inherit all values from another class in pure CSS.

CSS inheritance is from parent element to child element, this doesn't apply for rulesets such as CSS classes.

We can achieve this, with CSS preprocessors such as Sass & LESS, by extending the classes:

example in Sass (with SCSS syntax):

.block {
display: block
}
.green {
background: green
}

.green-block {
@extend .block; // in LESS, the syntax would be the same but without @extend
@extend .green; // in LESS, the syntax would be the same but without @extend
}

I would just use those CSS classes but override with the new CSS classes all the styles that you need to override.

If you need to inherit all the styles from the CSS class, just use the same CSS class twice and, if necessary, create a new class to override the styles that you don't need.

How to inherit css styles in child component from parent in Angular 5

Why make things complex?

Ideal way to do would be to add refrence of parent css file in child component as well.

 @Component({
selector: 'child-app',
templateUrl: `./child.component.html`,
styleUrls:['./parent/parent.component.css', './child.component.css']
})
export class ChildComponent { }

Inherit CSS classes in styled-components definitions?

This is doable using attrs as shown below

import "./styles.css";
import styled from "styled-components";

const App = () => (
<>
<Surface>Hello World 1</Surface>
<Surface>Hello World 2</Surface>
<Surface>Hello World 3</Surface>
</>
);

const Surface = styled.div.attrs({
className: "raised bordered"
})`
color: darkblue;
margin: 20px;
`;

export default App;

inheriting from another css class

CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:

.rounded-corners
{
/* Your CSS to define rounded corners */
}

Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):

.container
{
/* Your CSS to define a nice container */
}

How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:

<div class="container rounded-corners">
</div>

Now suppose you need rounded corners for a non container object:

<div class="rounded-corners">
</div>

This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.

NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.

It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:

.rounded-corners
{
/* Your CSS here */
}

.float-left
{
/* Your CSS here */
}

.container
{
.rounder-corners
.float-left
}

How to make the css child class inherits the parent css class

Preprocesser's & symbol copies the parent's name and doesn't copy it's properties.

However, if you want to extend your class, you can use the @extend mixin (for SASS) and :extend(...) (for LESS).

/* SASS */

.avatar {

min-width: 35px;

max-width: 35px;

height: 35px;

flex: 1 1 35px;



&--home {

@extend .avatar;

margin: 10px;

}

}

/* LESS */

.avatar {

min-width: 35px;

max-width: 35px;

height: 35px;

flex: 1 1 35px;



&--home:extend(.avatar) {

margin: 10px;

}

}


Related Topics



Leave a reply



Submit