I have two base CSS classes:
.smpb_color_gray {
color:#cccccc;
}
.smpb_font_size_18 {
font-size:18pt;
}
I wonder if it's possible to create one class which will contains both these classes? With name .smpb_my_combine_class and it must have color:#cccccc and fontSize:18pt.
I want to create one class and then use them on other classes.
Like I want to create:
.smpb_base_border_width{
border-width:1;
}
And then I want to create a class for other control, I want to just include this class, but not create a new class. It's needed if I want to change the default width in future.
If I make a change in the base, then I need that change in all classes.
In regards to JavaFX2, in the .root element you can define a property, such as -smpb-color-gray:#cccccc; and then reference that within another css class.
.root {
-smpb-color-gray: #cccccc;
-smpb-font-size: 18pt;
}
.smpb_my_combine_class {
-fx-text-fill: -smpb-color-gray;
-fx-font: -smpb-font-size;
}
I used -fx-text-fill because I didn't know exactly what you were trying to color.
Does that fit into your criteria?
try this
.smpb_font_size_18,.smpb_color_gray{
color:#cccccc;
font-size:18pt;
}
You can assign multiple classes to one html element like this
<div class="border black"></div>
but you cannot combine multiple classes in one as far as I know.
I haven't really looked into it much, but I think SASS might be able to do what you want.
If you mean using it like this:
.myclass {
.testclass;
}
than the answer is no unless you look into something like LESS.
It is:
.smpb_font_size_18,.smpb_color_gray{
/*whatever style for both*/
}
Basically, what you are asking is what Cascading Style Sheets are all about... Grouping Elements with the same top-level Classes or Ids together. The only thing you would have to do is to create your .smpb_my_combine_class and define the values like this:
.smpb_my_combine_class{
color:#cccccc;
font-size:18pt;
}
And then define your sub classes to replace the top-level class value with the default value like this:
.smpb_my_combine_class .smpb_color_gray{
font-size: medium; //The default value for font-size according to W3C
}
.smpb_my_combine_class .smpb_font_size_18{
color: black; //The default value of your Page font color?
}
So your .smpb_my_combine_class-classed elements will have those default values, as well as each class based on it. But keep in mind that this will only work if your subclass element is contained within an element of the .smpb_my_combine_class-class
Related
I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.
One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.btn-red{
background-color:red;
.radius;
}
.btn-green{
background-color:green;
.radius;
}
...
When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.
I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?
<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>
The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.
// Abstract placeholder.
%radius {
border-radius: 5px;
}
// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {
// Color modifier.
&-red {
#extend %radius;
background-color: red;
}
&-green {
#extend %radius;
background-color: green;
}
}
The CSS output will be:
.btn-red, .btn-green {
border-radius: 5px;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.
Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.
Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.
That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.
So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.
There are several benefits.
You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.
You can avoid repeating yourself.
#radius-size: 5px;
-webkit-border-radius:#radius-size;
-moz-border-radius:#radius-size;
border-radius:#radius-size;
You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts.
.radius(#radius-size) { ... }
Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.
for example:
you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:
#myinput {
&:valid { .has-success; }
&:invalid { .has-error; }
}
I have tried to combine to classes in CSS, but I end up failing. I used this code:
.container{
.ningbar
}
What I would like to do is combine the items in the ningbar layer with the items in the container layer. Thanks, Phineas.
This would do the job:
.container { /*container rules*/ }
.ningbar { /*ningbar rules*/ }
.container,.ningbar { /*shared rules*/ }
.container, .ningbar { }
Use the same rules for both.
why do you want to combine two classes ? I would make two seperate classes and use them in my controls as below
CSS:
.class1{
/* All styles for class1*/
}
.class2{
/* All styles for class2*/
}
HTML:
<div class="class1 class2"></div>
This way you can add both classes to your controls/DOM elements keeping them seperate in your CSS.
In order to use another styles' for another class, there is LESS, if I can say.
In a nutshell, LESS will help you to maintain more easily, and comprehensible your styles' files. You will be able to add variables, to avoid repetitions of same colors' codes, for instance.
You can view more detail on LESS's website : http://lesscss.org/
But, it's probably a complicated way, to simply add properties from another class.
For Combining two class you can us
.Class1 .Class2 {
//All style for combination of these two classes
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Should css class names like 'floatleft' that directly describe the attached style be avoided?
I was wondering what the best practices were for the naming and usage of CSS classes.
For instance, in a scenario where you want to center the text of both the button text and the header text, is it better to repeat this style in both classes like
.button-text {
text-align: center;
/*some properties*/
}
.header-text {
text-align: center;
/*other properties*/
}
Or is it better practice to move that style out into a separate class like
.center {
text-align: center;
}
.button-text {
/*some properties*/
}
.header-text {
/*other properties*/
}
and have the class of "center" applied to elements that have the classes of "button-text" and "header-text".
What it comes down to, is, should CSS class names represent what an element is "button-text" or "state, what an element looks like "center"?
Thanks!
A CSS class should represent what you use the element for, not what the element looks like.
Consider that you have headers that are red and bold, and change the design to large blue letters instead. If you named your classes after the look of the headers, you end up with:
.RedBold {
color: blue;
font-size: 200%;
}
Having a class named center is definitely the wrong approach - this class name already implies the presentation, that's not the point of defining presentation in a separate file. A better way to avoid code duplication would be:
.button-text, .header-text {
text-align: center;
}
.button-text {
/*some properties*/
}
.header-text {
/*other properties*/
}
Another option is specifying multiple classes, e.g. class="button text" instead of class="button-text". This gives you:
.text {
text-align: center;
}
.button.text {
/*some properties*/
}
.header.text {
/*other properties*/
}
Unfortunately, this approach has to be ruled out if you need to support MSIE 6.0, all other browsers (including newer MSIE versions) deal with multiple classes correctly. As other people already noted which solution you choose is mainly a question of maintenance - choose the one that will be easier to change and adapt to new requirements.
Maintainability is king. Whatever you find most easy to maintain - in my opinion, this is your second example.
It depends how much you will center text, the issue with the second point is that you could then end up with a long list of classes added to each element in your HTML which isn't so clean.
If these happen in, for example, a p tag a lot, then you'd possibly be better off putting one class in the parent so the children can inherit it.
i tend to group items together example like
.button-text, .header-text{
text-align:center
}
then if they need something unique add that to another
ie
.button-text{
font-size:22px;
}
.header-text{
font-size:44px;
}
class name's should be usefull but its not a biggie, just ensure they are unique. Often i name things based on their hierarchy within a page or section, as to prevent any accidental duplication.
Is it possible to add additional rules to a css block when using a "{ (properties of x) }" selector?
I looked at references but I can't find anything related to "properties of x". A link would be wonderful. I tried the following two combinations, but neither worked:
.dock li { (properties of grid_2; display:inline; background-color:#666; ) }
.dock li { display:inline; background-color:#666; (properties of grid_2) }
Many thanks!
EDIT
Apparently I misread an article and thought that such a syntax existed. I thought one could create a class and let it inherit the properties of another using such syntax, which is evidently not the case.
CSS does not have such a feature.
What you are describing is not possible. I think there are two other possibilities you could maybe use. The first is, that you need to know that several styles can be applied to an element at the same time. I'll give you an example:
li { font-size: 10pt; }
.dock li { color: #ff0000; }
All list items will be formatted with a font size of 10 points and only those within an element containing the dock class will be red.
My second suggestion is that you try applying two or more classes to your HTML element, for instance:
.grid li { font-size: 10pt; }
.dock li { color: #ff0000; }
Now put the grid and dock class into your HTML, and the elements will apply both style definitions:
<ul class="grid dock"> ...
Whatever you consider best for your project: remember that the properties defined in the second style overwrite the properties of the first one (if they do not define the same properties at all, there will be no confusion).
maybe your question is not too strange..
What I understand is that you want to do something like:
.a { prop1: val; prop2: val; }
.b { prop3: val; prop4: val; }
.c { .a; .b; prop5: val; prop6: val; }
You want the class .c to inherit all the properties and values of .a and .b
If this is ok, you can do that using LESS.
To use your LESS code in your sites you have different ways to do it.
First of all check the original site: LESS.org
If you are on Mac check this site: LESS APP + PLUGINS
If you are on PC the less.js plugin should be easier to implement LESS in your sites: less.js usage
Hope it helps.
Happy coding y'all! :)
Basically I have a theme in my ASP.NET application and it contains a css file that turns all my tables blue, which looks great.
It looks like this
table
{
background-color: #DEF1FF;
border-color: #DEF1FF;
color:#5793C9;
}
td
{
// TD properties
}
But now I want one table to be a different colour. I created a class to override it:
.BlankTable
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
}
I set a <table class="BlankTable"> and I have two problems:
firstly, if I put another table inside that one, it does not inherit BlankTable but uses the original table part of the css file
secondly, if I use the td part to set a td specific property (like padding), it doesn't carry across - <table class="BlankTable><tr><td>hello world</td></tr></table> results in the using the td I put in the CSS file.
Ideally what I want is to set my CSS code like this:
.Blank
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
table { // properties }
td { // properties }
}
so it uses the table/td properties I specify for the .Blank css class. Is there any way to do this or to refactor my code somehow so I can have all tables looking blue by default, and be able to override it easily?
You can do that, but the syntax is :
.Blank
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
}
.Blank table { // properties }
.Blank table td { // properties }
These last 2 rules will match a table and td located inside anything with class "Blank".
Use it like this:
.Blank table {...}
.Blank td {...}
Although I must warn you: there are rare cases where you should use a table inside another table.
The other answers are correct, but it's worth pointing out that this is just one type of CSS selector (the descendant selector). There are all sorts of other CSS selectors that you might want to use to target specific elements.
It's worth getting familiar with them - you might be surprised with what can (and can't) be done. (Using jQuery will also be a lot easier if you are familiar with CSS selectors.)