Quick question which is mostly explained by the code.
Is this possible in CSS or do I have to just implement all the classes in the html?
.class1{
color:red;
}
.class2{
text-decoration:underline;
}
.class3{
class1;
class2;
border:1px solid green;
}
You can use a CSS pre-processor like LESS or SASS for CSS "class inheritance".
Otherwise, your code sample is not possible with pure CSS. You can, however, use a comma to add similar styles to multiple elements:
.class1, .class2 {
/* your styles */
}
It is not possible to do it as such. If an element needs to have multiple classes, just specify it in the HTML :
<span class="class1 class2">Test</span>
Note that it is possible to define a selector for elements having multiple classes. .class1.class2 selector would target the element in the example here above, while not targetting elements that don't have both classes specified in HTML. This is usefull for example if you wish to override one of the properties of 1 of the classes only when they're used in combination.
One approach you can use is to implement it through JS itself.
I would recommend using something like JSX it will simplify the process.
You can set a variable somewhere within scope and list your classes
const buttonStyle = "class-1 class-2 class-3"
Applying the style using JSX (Provided you use it)
<button id="my-button" class={ buttonStyle } />
Applying the style using JQuery (Provided you use it)
$("#my-button").addClass(buttonStyle)
Related
What is the more appropriate approach when using BEM ?
Are we allowed to not add extra classes to elements and style the elements themselves
<section class="news-section">
<a>link</a>
</section>
.news-section {
a {
color: blue;
}
}
Or do we have to add extra classes to all elements and style those classes?
<section class="news-section">
<a class="news-section_link">link</a>
</section>
.news-section {
&_link {
color: blue;
}
}
Are we allowed to not add extra classes to elements and style the elements themselves
No.
With BEM, you have to always use CSS classes:
In HTML, BEM entities are represented by the class attribute. (bem.info)
In return for this rigidity, BEM will bring you :
Scalability, because blocks can be nested without limit;
Flexibility, because CSS selectors are loosely coupled with HTML tags.
You should definitely add extra classes to style elements like links. It's the same situation as when you add styles to buttons header__btn or images use-profile__img
It is never bad to add additional classes and they make code expandable in the future. Imagine a situation where you would like to add more elements inside this <a> tag. You wouldn't code it like this news-section__a__link-header right?
Important: you shouldn't target elements 2 levels down with BEM as it's block__element-modifier, not block__element__element--modifier :)
BEM is pretty well explained here
To add to the existing answers, yes avoid using specificity to style items unless absolutly needed (CMS wysiwyg content for example), so your second code block it correct BEM
However in your specific example, all you are setting is a color, and you probably have other items you want the same color right?
So i probably makes more sense to use a utility class for that:
<section class="news-section">
<a class="u-txt-blue">link</a>
<p class="news-section__title">...</p>
</section>
.news-section {
...
&__title{
...
}
}
//utilities.scss
.u-txt-blue{
color: blue;
}
Add classes to all the elements so as not to tie your styling of your components to your HTML structure.
In your example your first example, the new-section__link will have to be an anchor element, in the second it can be any type of element which is a lot more powerful and flexible.
If I define a css class, is there anyway to set that class as a default class for an html element? To clarify, I was hoping to factor out the definition of the class so it could be used by one or more css selectors or applied discreetly in the html.
For example:
.myclass {float:right}
h1 {class: myclass}
The above does not work of course, but hopefully you know what I am asking as I have not been able to find how to do this.
Not with standard CSS, but why not just do:
h1 {
float: right;
}
If I define a css class, is there anyway to set that class as a default class for an html element?
No. You can, however, select all elements and apply a rule to them:
* {
foo: bar;
}
You can do that if you are using a CSS processor like LESS (http://lesscss.org/#-mixins) or SASS (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins).
From your repeated comment “I was hoping to factor out the definition of the class so it could be used by one or more elements or applied discreetly”, it seems that what you are really up to is how to define a set of CSS declarations so that they apply to elements in a given class and and some elements independently of class. The way to do this is to use a list of selectors, e.g.
.myclass, h1 { float:right; /* and other declarations as needed */ }
This is the kind of “factoring out” that you can achieve in CSS. There is no way to “factor out” “CSS classes”, because there are no CSS classes. There are classes in HTML, and you can specify rules that apply to such classes.
Just write the following HTML
<h1 class="mylass"> .... </h1>
and write VALID CSS
i.e.
.myclass {float: right}
I'm not sure what you want to achieve, but maybe you ask this because you want to have multiple html elements use the same "class"?
If that's the case you can write it like this:
h1, h2, span{
background: red;
}
I am inserting an image into a div container with css like this:
.ft-folder-closed:before {
content: url('../ll-filetree/img/ft-plus.16.png');
}
I want apply some css attributes to that image without listing them in the together with the "content" attribute, but apply a nother style to it, to reduce CSS overhead. Something like this, but that of course does not work:
.ft-folder-closed:before {
content: url('../ll-filetree/img/ft-plus.16.png');
inherit: ft-floder-icon;
}
Any chance to do that?
You can group your CSS selectors to apply the same styles on multiple elements. This allows you to apply the same styles to multiple elements without repeating the styles.
Example:
.ft-folder-icon, .ft-folder-closed:before {
color: red;
}
This will apply the color: red; style to both the .ft-folder-icon elements and the .ft-folder-closed:before pseudo-elements.
If you decided to use a CSS pre-processor like LESS you could abstract your CSS using "mixins" similar to this:
.ft-folder-closed:before{
.ft-folder-icon;
}
Using "mixins" you can embed all of the properties of a class into another class just by including the class name as one of its properties. It's very similar to variables, but for entire classes.
If I have a style class defined as such:
.myclass{
//bunch of other stuff
float:left;
}
and I define another class like this:
.myclass-right{
float:right;
}
and I define a div this way:
<div class="myclass myclass-right"></div>
Will that div inherit everything from myclass, but override the float property to float:right? That's what I'd expect to happen. Also kind of want to know if that has any cross-browser implications (good browsers vs. IE 7 or greater, f*** IE6).
As long as the selectors have the same specificity (in this case they do) and .myclass-right style block is defined after .myclass, yes.
Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.
Using !important is one way to do it.
.myclass-right{
float:right !important;
}
In addition if you are more specific with your selector it should override as well
div.myclass-right{
float:right;
}
Just wanted to throw out another option in addition to !important as well as style definition order: you can chain the two together as well:
.myclass.myclass-right{float:right;}
.myclass{float:left;}
As long as myclass-right is declared after your other class in your css file, it will work.
In case of a conflict, the css tag that comes after has a priority.
In other words - if you want some class to ever override others - just put it on end of your css file.
P.S. But don't forget that more specific rules has more priority, like .a.b {} is more powerful than just .a{}
I have DIV ids in an application that are generated dynamically, with an ID at the end. For example: <div id="vote_score_72">, <div id="vote_score_73">, <div id="vote_score_74"> and so on.
How can I write that id in the CSS file so I can apply a style to it?
Further to the suggestion that you should use classes for this functionality (and you should), you can, instead, use the attribute-value-begins-with selector (this may not be the formal name):
div[id^=vote_score] {
color: #f00;
/* and so on... */
}
JS Fiddle demo.
Edited to add a link to the Quirksmode.org's compatibility tables for advanced attribute selectors.
References:
CSS3 Attribute-selectors, at Sitepoint.com.
Attribute selectors, at CSS3.info
Attribute Selectors, at the Mozilla Developers Network.
You should add a common class to all these elements and use this class in your CSS.
Classes are the best way to handle common style for different elements.