Declaring same CSS class multiple time - css

<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 */
}

Related

The CMS I use defines color variables in hex values. Is there a way to convert that variable value to a lighter shade of that color using CSS?

I can't change the CSS color variables in my company's CMS, which are written in 6-digit hex values. Can I use those variables to get a lighter shade of the predefined color value using just CSS?
Edit: I still need the color to refer to the variable. I'm building a templated page for different sites hosted on our CMS and different sites have different colors set for the --primary, --secondary, etc variables. So I can't outright just go put a static RGB value conversion for the template since it needs to be able to seamlessly be copied and pasted into the different sites.
My company uses a proprietary CMS that defines color values (--primary, --secondary, --neutral, --accent) in six-digit hex values. I can't change those. I am trying to define a background color as 50% of the neutral color.
Unfortunately, I'm not well versed on how to use javascript or jquery. It's just been a long, long time since I knew how to use anything other than .changeClass. That doesn't mean I can't, it's just I don't know how to do much more than copying and pasting.
So ideally I'm looking for a simple CSS fix to this, but if I have to copy and paste a line in my page, I absolutely can.
<style>
:root { /* This is all predefined and I have no control over it. */
--primary: #e42525;
--neutral: #606161;
--secondary: #003d75;
}
.wrapper {
background-color: rgba( var(--neutral), .5); /* Since my values are in hex, I can't use the rgba() function thing */
}
</style>
If there's a simple script I can copy and paste into my page that would convert --neutral into an rgb value and define that value as --neutral-rgb or something like that, I could use that. I'm just not confident in my script writing/understanding abilities.
Or, if there's a way to say:
background-color: hsl( var(--neutral) + "f0");
or
background-color: calc( var(--neutral) * (50%));
That would be so dope...
P.S. Don't crucify me if this question has been answered before. I'm not exactly sure how to phrase it right. I've been teaching myself Sass in my spare time, so I'm just barely beginning to figure this stuff out.
Many Thanks!
If it's only about background, use an extra layer for the background where you can apply opacity:
:root { /* This is all predefined and I have no control over it. */
--primary: #e42525;
--neutral: #606161;
--secondary: #003d75;
}
.wrapper {
position:relative;
z-index:0;
}
.one {
--c:var(--neutral);
--o:0.8;
}
.two {
--c:var(--primary);
--o:0.2;
}
.wrapper:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-color: var(--c,transparent);
opacity:var(--o,1);
}
<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>
You can even apply filter and be able to change the initial coloration like you want:
:root { /* This is all predefined and I have no control over it. */
--primary: #e42525;
--neutral: #606161;
--secondary: #003d75;
}
.wrapper {
position:relative;
z-index:0;
}
.one {
--c:var(--neutral);
--o:0.8;
--f:brightness(20%);
color:#fff;
}
.two {
--c:var(--primary);
--o:0.2;
--f:hue-rotate(130deg);
}
.wrapper:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-color: var(--c,transparent);
opacity:var(--o,1);
filter:var(--f,none);
}
<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>

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>

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

How to create zebra stripes on html table without using javascript and even/odd classes generation?

I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
If all you're changing is the background colour, then the following would work, where test.gif is a 40px high image with the top 20px one colour, and the bottom 20 pixels the other colour. If you need to change any other css properties you're pretty much stuck.
table { background: url(test.gif) top; }
table tr { height: 20px; }
http://www.w3.org/Style/Examples/007/evenodd
CSS 3 nth-child. Since browser support is limited you can reproduce the behavior with Sizzle (included in, jquery for example)
(In CSS <= 2) Nope. Unfortunately there aren't any selectors (in CSS <= 2) that operate based on the position (in terms of the number it is within it's parent's children) which I believe you would need to do this with just CSS.
Note to self: read up on CSS3, already!
In http://www.w3.org/TR/css3-selectors/#structural-pseudos you can find explanation and examples on using nth-child:
tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
background-color: green;
}
tr:nth-child(odd) /* same */ {
background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
background-color: pink;
}
tr:nth-child(even) /* same */ {
background-color: pink;
}
Good luck with browser compatibility - you'll need it.
There are hacks to make it work in IE (using JS) - I'll leave that sifting to you.

Can I include a css definition in another css definition?

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.

Resources