I was wondering if something like this can be done in CSS. I want to be able to group css so that I can I don't have to write it like this.
.wrapper .header {do: something};
.wrapper .nav .firstMenuItem {do: something};
[div id="wrapper"]
[div class="header"]
[div class="nav"]
[ul]
[li class="firstMenuItem">First Item</li]
[/ul]
[/div]
[/div]
[/div]
Instead, I would like to do something like this but I've never seen it being used like this
.wrapper
{
.header .nav {do:something;}
.header .nav .firstMenuItem
{
do: something;
}
}
You can do this with LESS and SASS
However, before going too far down this road I recommend you read a little about Object Oriented CSS. (Some good tips from people who have experience with large projects)
LESS example:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
SASS example:
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
#extend .error;
border-width: 3px;
}
You can't do that with pure CSS, but you can use something like:
LESS
SCSS
Not with CSS alone, but you can for example use LESS which provides this kind of nesting.
I'm afraid that is just not possible in classic CSS. It is against the syntax.
There to exist interpreters for alternative syntaxes, which will just turn your syntax into valid CSS either at compile-time or run-time. You could look for or write one of those.
But if you want what you write to be valid CSS, this is just not possible.
Related
I have a CSS stylesheet as follows:
.commandsTable {
color: whitesmoke;
background-color: black;
margin-left: auto;
margin-right: auto;
}
.commandsTable td {
background-color: #039be5;
}
.commandsTable tr:hover {
background-color: black;
}
As one can see, '.commands table' is repeated twice to style the td and tr elements respecitvely.
So...
Is there a way of nesting dot (.) operators in CSS in order to prevent repetitive code entry?
You can do that only with a preprocessor like sass
In pure css you can not nest elements
Here's a link that would perfectly suit your requirement:http://tabatkins.github.io/specs/css-nesting/
While you can go for SASS, there is another option which is cssnext and you should definitely check it out.
Here's a link for it:http://cssnext.io/features/
I would like to have below CSS output using Less
.selected-values,
.selected-values a {
background-color: #505050;
color: #fff;
}
.selected-values {
display: block;
}
.selected-values a {
text-decoration: none;
}
So far i have thought of below Less syntax, but it is not working.
.selected-dropdown-values() {
background-color: #505050;
color: #fff;
}
.selected-values:extend(.selected-dropdown-values) {
display: block;
}
.selected-values a:extend(.selected-dropdown-values) {
text-decoration: none;
}
I am not able to apply any extend logic to generate this syntax. I might be missing something or i am unaware about how to do it properly in Less. Also, I do not want .selected-dropdown-values mixin to output in CSS.
As mentioned in comments and discussed in the chat, Less currently does not support extending of mixins (there is a request and it might get addressed in v2.0.0 or later). (Note: To be more precise with wordings, extending of mixins which are not output in CSS is not supported.)
So, the best way forward would be to do the below:
Less:
.selected-dropdown-values { // just remove the braces
background-color: #505050;
color: #fff;
}
Just remove the braces from the .selected-dropdown-values rule. Ofcourse this would cause that rule also to be present in the CSS output but given that we are using extend, it would mean only one extra line in CSS output.
Output:
.selected-dropdown-values,
.selected-values,
.selected-values a {
background-color: #505050;
color: #fff;
}
I have an extremely messy stylesheet that I'm trying to clean up, and one thing I've searched for an answer to is how to clean an example of this up:
.element .Change {
font-size: 1em;
}
.element .Name {
font-size: 1em;
}
can this be re-written in a cleaner way? ex:
.element .Change, .Name {
font-size: 1em;
}
I should probably know this, but when I search for putting CSS on one line, I get examples of single-line CSS.
Thanks for your help
Yes, almost exactly as you propose.
.element .Change,
.element .Name {
font-size: 1em;
}
.element .Change, .element .Name {
font-size: 1em;
}
CSS redundancy is not all the bad, as you need to keep some buffer for future changes.
If you're sure that your styling won't change, then what you have done is perfectly fine.
I'd advise you to have a look at LESS and other similar compile-to-CSS languages.
Are there containers for CSS Selectors?
I'm simply curious if there's a more elegant way to do this without repeating the class:
#div1 .divClass, #div2 .divClass { color:cyan; }
This is what I had in mind, but I don't think there's a way to do it.
#div1,#div2 > .divClass { }
[#div1,#div2] .divClass { }
Short answer: No.
It seems a case where you can add a class for both divs.
<div id="div1" class="sharedClass"></div>
<div id="div2" class="sharedClass"></div>
.sharedClass > .divClass { color: cyan; }
Anyway, this question can have multiple answers. Consider looking at LESS, which extends CSS capabilities. Then you could do something awesome like this:
.divClass {
/* ... */
}
#div1 {
color: red;
border: 1px solid blue;
.divClass;
}
#div2 {
color: cyan;
border: 1px solid green;
.divClass;
}
Sounds like you're looking for a something like LESS, which is a stylesheet language which can be compiled into ordinary CSS. It might not do exactly what you're after in your specific case (but then again, it might, I haven't tried) but it sounds like it would be useful to you.
Let say I have to repeat the color blue in my web page, what's most effective, time saving, and smart way of doing it?
Examples:
1. This example can mess up a little bit my css file.
#header, #content, #footer {
color: blue;
}
#header {
(other properties)
(other properties)
(other properties)
}
#content {
(other properties)
(other properties)
}
#footer {
(other properties)
(other properties)
(other properties)
}
2. With this example I'll end up modifying my html file more often.
css:
.default-color {
color: blue
}
#header {
(other properties)
(other properties)
(other properties)
}
#content {
(other properties)
(other properties)
}
#footer {
(other properties)
(other properties)
(other properties)
}
html:
<div id="header" class="default-color">
(content here)
</div>
<div id="content" class="default-color">
(content here)
</div>
<div id="footer" class="default-color">
(content here)
</div>
I'd prefer the first form. Adding a "default-color" class starts to move into the territory of adding style into your markup, and it's generally more flexible to keep them separate as much as possible. On the other hand, if you have a semantic class name you can add to all of those that makes sense, then that could work.
Otherwise, if you really do just want a "default" color, you can specify it on the html or div elements in your css, and just override it with more specific classes where you don't want elements to show up as the default color.
Consider authoring your stylesheets using SASS. This will allow you to manage duplication in a number of ways:
The simplest is to define a variable for your blue color and not worry about having to update multiple occurrences:
$color-corporate-base: #009
#header { color: $color-corporate-base; }
#content { color: $color-corporate-base; }
This will compile to regular CSS, putting the color values wherever they're referenced in your document:
#header { color: #009; }
#content { color: #009; }
You could use "mixins" to include rules into different selectors:
#mixin bold-color {
color: blue;
font-weight: bold;
}
#header {
#include bold-color;
background: black;
}
#content {
#include bold-color;
background: white;
}
This will compile to regular CSS, with the two included style rules in each selector. Of course, this creates duplication:
#header {
color: blue;
font-weight: bold;
background: black;
}
#content {
color: blue;
font-weight: bold;
background: white;
}
Even though that takes care of the duplication in your Sass stylesheet source making it easy to work with, the CSS output still has that duplication. (You could group the common styles with commas and put the different styles into their own selectors, but that's right back to your original question.)
There's a cool new feature of Sass that addresses this. It's called "selector inheritance". Check it out:
.bold-color {
color: blue;
font-weight: bold;
}
#header {
#extend .bold-color;
background: black;
}
#content {
#extend .bold-color;
background: white;
}
At a glance, this seems very similar to mixins, but look at the CSS output:
.bold-color, #header, #content {
color: blue;
font-weight: bold;
}
#header { background: black; }
#content { background: white; }
This lets you organize your selectors in your Sass stylesheet as you wish, and, you get the optimized output you want!
One way of doing it for standard compliant browsers would be to use !important.
Example:
div
{
color: blue !important;
}
I would prefer the first version, too. But remember that you can also use multiple classes within one element. So you could you something like:
.blue {
color: #00F;
}
.bold {
font-weight: bold;
}
<div class="blue bold">Text</div>