Can I include a css definition in another css definition? - css

So let's say I have the following in 'foo.css':
.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }
Now let's say that I have two divs I want borders for, so I do:
<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>
This works fine, but I find that when defining #foo and #bar in my css file, I would rather give them the characteristics of .border than give the div's the class, like so:
.border { border : solid 1px; }
#foo {
<incantation to inherit from .border>
color : #123;
}
#bar {
<incantation to inherit from .border>
color : #a00;
}
and then my html would just be:
<div id="foo">Foo</div>
<div id="bar">Bar</div>
Anybody know what that magic incantation is?

That is not supported by css. The best you can do is something like:
#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

You might be interested in mixins with Sass. Sass lets you write css style sheets in a more efficient way, using tricks like this. Mixins let you define a group of attributes (say, to do with borders), and then include those attributes within certain css classes.

As Wsanville said, you can't use the class.
But normal CSS inheritance does work - say if your html was
<div class="border">
<div id="foo">
hello
</div>
<div id="bar">
world
</div>
</div>
You could say
.border {border: 1px solid #f00;}
#foo {border:inherit;}
Which in some cases might be good enough

If you're looking to push your CSS further instead of using some of the tricks outlined in earlier posts, you should look into CSS Compilers. They take CSS-like code you've writen, usually CSS with a few tricks added in, and turn them into normal CSS for the web.
David Ziegler wrote about some of the cool featured CSS compilers offer:
Variables - Good programmers don’t like to hardcode. In many cases you can avoid this in CSS by using good inheritence, but sometimes it’s unavoidable. With variables, changing your color scheme means updating one variable instead of 13 attributes.
Math - This goes hand in hand with variables. Say your left column is 100px, your right column is 500px, and your wrapper div is 600px. Well, maybe you decide to change it to 960px. Wouldn’t it be awesome if the width of your columns adjusted automatically? The answer is yes.
Nested Styles - This is probably the most important. CSS is flat, which means complex sites end up with CSS that is a pain to go through.
You can read about popular compilers in his blog post on the subject, or do some searching and find one that works best for you.

Related

How to avoid css selector applying style rules from another file

I came across this problem while handling a large project and felt that i should seek an opinion from the community here.
I have specified a css class 'header' in style1.css, i.e.
.header { color: red;}
In another file, I inadvertently, named a class 'header' again with this rule :
.header { background-color: yellow; }
When i refreshed the browser i noticed the red font and after examining the style inspector found the problem. I tried to avoid the problem by applying specificity, i.e. #some-div .header, but that didnt stop it from applying the red font. Of course i could simply solve the problem by renaming header to something else, but i'm curious how developers who handle large projects handle this. Thanks for your time.
Well, from your code, you specified values for different properties in the two declarations of the header class. The first declaration specifies a color property and the second specifies a background-color property. From all indications you're not really "overriding" anything since you didn't give conflicting values for one property so, CSS is simply giving the values of the first declaration of the header class to the second one because there's no difference. If you wanted to override it for the second you'd have to probably add a different identifier to the second declaration of the header class to point to a unique element and specify a different value for the color property. Hope this satisfied your curiosity.
Just add a different class to one of the cases. For example:
.header {
color: red;
}
.header.yellow-bg {
color: initial;
background-color: yellow;
}
<h3 class="header">Red header</h3>
<h3 class="header yellow-bg">Black/yellow header</h3>
The second declaration for color applies because it is more specific (2 classes > 1 class).
Don't use !important as another user suggested. Avoid it all costs. It's the easy way out for the moment, but once you start going down that road, you're going to end up with a stylesheet that's terrible to manage.
Set your styles for a specific base and use classes and more specific selectors as overrides. Remember that stylesheets cascade.
For example, say you have a typical header font color that should be your .header. If you have other one-off or unique headers that share same structure provide another class to that which makes sense to you.
So as an example:
Both headers have the .header styles but headers with the special class have blue text color which overrides red.
.header {
color: red;
width: 100%;
display: block;
background-color: #eee;
padding: 10px;
margin: 2px;
}
.header.special {
color: blue;
}
<div class="header">Regular Header</div>
<div class="special header">Special Header</div>

Modifying BEM classes with Sass #extend

With the BEM methadology, say I have two classes like this:
.staff__teacher
and .staff__teacher--professor
In the markup for the professor, is the idea to have both classes or just the modified class?
<div class='staff__teacher staff__teacher--professor'></div>
or
<div class='staff__teacher--professor'></div>
From my point of view, it seems to make much more sense to go for the latter as it is more streamlined and easier to read.
In Sass, the class would be created by simply extending the .staff__teacher class
.staff__teacher--professor{
#extends .staff__teacher;
//...extra professor styles here..
}
However, in the majority of tutorials I've seen on BEM, both classses are added to the markup. Can someone help me understand if one way is preferable to the other? Are there any problems that using my method might cause?
Firstly, this is a fairly opinion based answer. There is nothing stopping you using #extends instead of a base class. Here are some reasons why two classes may be used.
1. It's not just about SASS
Firstly, not everyone uses SASS. Even LESS didn't have extend until fairly recently. A methodology should not limit itself to a particular preprocessor or one at all. Plain old CSS is what we are looking at here. However to could do something like this:
CSS
.button,
.button--red,
.button--green {
// base styles
}
Personally I'd rather leave the base style alone once I've written it and in the case of buttons I might have quite a lot of modifiers. For me this is getting a bit messy, where as putting two classes on an element is keeping my CSS cleaner and more concise.
2. Descriptive
Part of BEM is that classes are now more descriptive, you can look at a stylesheet and have a greater understanding of the module/component and what is contained within it. For me base classes do the same. It gives me more information when I'm looking at my markup.
<input type="submit class="button button--green"/>
I can see it's a green button and that it derives from button, I know I can change this easily and there are probably other options available to me. All without looking at the stylesheet.
3. Flexibility and consistency
Don't think that you will only ever have a base class and one modifier. You can quite easily have many. For example, I could have button, button--large and button--green.
<input type="submit class="button button--large button--green"/>
So which modifier would extend button? If both did then you would have the same styles applied twice. How does another developer know? By keeping a simple consistent approach your component is much clearer to read, understand and use correctly.
Summary
These were a few reasons why extend is not used often in examples. I think the most important point is, what ever you do make sure is a consistent approach and all developers are aware of this.
use code this sample
//css
<style>
.firstClass{
color:red;
font-size:20px;
}
.secondClass{
border:1px solid red;
font-size:30px;
display:inline-block;
}
.thirdclass{
font-size:40px;
}
.fourthclass{
padding:50px;
}
</style>
//use code html
<div class="firstClass secondClass thirdclass fourthclass">khitsapanadilove#gmail.com</div>
<div class="secondClass thirdclass"> khitsapanadilove#gmail.com </div>
<div class="thirdclass firstClass"> khitsapanadilove#gmail.com </div>
<div class="secondClass fourthclass"> khitsapanadilove#gmail.com </div>
// another example use css code
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
#extend .message;
border-color: green;
}
.error {
#extend .message;
border-color: red;
}
.warning {
#extend .message;
border-color: yellow;
}
//write you html code
<div class="message">khitsapanadilove#gmail.com</div>
<div class="message success"> khitsapanadilove#gmail.com </div>
<div class="message error"> khitsapanadilove#gmail.com </div>
<div class="warning message"> khitsapanadilove#gmail.com </div>

Plugin css overide by theme and damages layout of plugin

I'm currently developing a plugin in wordpress the problem is its layout with different themes the layout of plugin changes.
How to make the plugin css wont change whatever themes is applied?
#playbutton
{
z-index:99;
bottom:15%;
padding: 10px;
right:0px;
position:absolute;
font-size: 95%;
width:24%;
height:10%;
text-align:center;
color:white;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900000 0, endColorstr=#99000000);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)';
border:1px solid #bfbcc5;
}
Here is css which changes when different themes is applied? I'm currently using % in width or height .
There are a lot of things to consider when you want an element's layout to look the same even when using different themes:
1.) Specificity
Research what specificity is all about and how you can use it to your advantage
If you want to make your StyleSheet more dominant, place the tag after the less
dominant sheets.
Make sure your class names are not used by others - trick: use class prefixes
If all else fails, the !important keyword is your friend.
2.) Parent Layouts
Say the playbutton's parent element is affected by the theme and that the #playbutton is using percentages, chances are the button will take on the parent's size as it is still dependent. It would be easier if the parent is not affected by the theme so you may need to go back to #1.
I don't know what the total markup of this project's page but I hope this helps.
You need to create wrapper for you plugin and use namespaces. I don't know what you are developing but for example if its video player plugin it could be something like this:
html:
<div class="my-video-player">
<div class="foo">
<div id="playbutton"></div>
</div>
<div class="bar">
</div>
</div>
now html code in place, you need to use namespaces also for your css:
.my-video-player {
/*wrapper styles go here (and also baseline styles: font-size for example), for example: required width and height*/
}
.my-video-player .foo {
/*now these styles are based on 'my-video-player' styles*/
/*so if you use width in percentage its based on the my-video-player width*/
}
.my-video-player .bar {}
.my-video-player #playbutton {}
This way your css will not collide with other styles. Also if you need javascript do it like this:
var myVideoPlayer = {
foo: function() {
},
bar: function() {
}
};
usage:
myVideoPlayer.foo();
Note: Javascript namespaces can be overriden by external code so the best way would be to follow modular javascript pattern, but thats out of scope of this question.

Declaring same CSS class multiple time

<div class="big_box">haha</div>
<div class="small_box">haha</div>
This (type 1) seems workable :-
.big_box, .small_box { border:1px solid #ccc; /* lengthy attributes*/}
.big_box { width:150px; height:150px; }
.small_box { height:140px; width:140px; }
This (type 2) also works :-
.big_box { border:1px solid #ccc; width:150px; height:150px; /* same lengthy attributes*/}
.small_box { border:1px solid #ccc; width:150px; height:150px; /* same lengthy attributes* }
Of course, type 2 is lengthy and repeating for most of the common attributes (with same value),
is there any issue for using type 1 ?
(or simply this is allowed ?)
P.S type 3 works too (but I find is hard to manage) ... if
<div class="box big">haha</div>
And
.box { border:1px solid #ccc; /* lengthy attributes*/}
.big { width:150px; height:150px;}
type 1 is actually very common when declaring multiple classes with some share the same attributes and some have their owned unique attributes. type 2 is a bit dirty to maintain while type 3 is similar to type 1.
it is all works, just a matter of coding style and ease of maintenance
There is no issue using the first syntax.
It is actually useful, as you noticed to avoid repeating the same time the same styling.
It is also useful to separate the types of styling: positionning, fonts, colors.
You can for instance have in one file the styling that positions the elements and in another file the styling for the colors/backgrounds, allowing you to change the "theme" of your site by just changing the css file responsible for your colors, without breaking the layout itself.
This is for instance what is used in jQuery UI CSS Framework. You have:
the jquery ui base css
all the jquery themes files
All three possibilities are allowed. I'd prefer the third for its conciseness.
I would use option 3 so that both boxes inherit the class box and then you can define whether that box is small or large.
However, there are a number of ways you can do this but this would certainly be my recommendation.
I prefer hyphenated classes.
This way you could do something like this:
<div class="box-big">haha</div>
<div class="box-small">haha</div>
div[class|=box]{
/* shared attributes*/
}
.box-big{
/* stuff */
}
.box-small{
/* stuff */
}

Chaining CSS rules

I have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars

Resources