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
Table-Cell - Some Kind of Colspan
@Font-Face Won't Load via Https in Ie
CSS Multiple Selectors Without Comma
How to Style a Div to Be Trapezoidal
What Is the Purpose of CSS Prefixes
Print Background Image in Ie Without Enable "Print Background Colors and Images"
How to Display Image Over Image on Hover with CSS
Converting "Long Shadow" SASS Mixin to Less
CSS Nth-Child Apply Odd-Even Rule But Switch Every 4 Items
Reverting CSS Style of <Input Type=Submit Button to Its Default Style
Bootstrap Modal Window Inside Another Div
Cross Browser Support for CSS Flexbox
Font-Awesome Not Properly Displaying on Firefox/How to Vend via Cdn