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/
Related
I am using react semantic ui lib. I have multiple modals in my application with different classes. I don't want to setup styles for modal globally since some places it's not required. Initially, I had following styles:
.abc.ui.modal > .close {
top: 1.0535rem !important;
right: 1rem !important;
color: black;
}
.xyz.ui.modal > .close {
top: 1.0535rem !important;
right: 1rem !important;
color: black;
}
Then, I simplified up-to this:
.abc.ui.modal > .close,
.xyz.ui.modal > .close {
top: 1.0535rem !important;
right: 1rem !important;
color: black;
}
Can I simplify this further? or can I avoid using .ui.modal > .close twice or more? Thank you!
Due to specificity in CSS, you need those .ui.modal > .close rules in order to maintain higher specificity and get your styles to override the default styles in the Semantic UI classes. If you are only using CSS, then you have already optimized as far as you can go, which is great.
If you were using a CSS preprocessor like SASS you could optimize even further by doing something like this:
.abc,
.xyz {
&.ui.modal > .close {
top: 1.0535rem !important;
right: 1rem !important;
color: black;
}
}
As a separate note, I would caution against using !important rules if at all possible as they can become extremely hard to override later on if you need to. Instead, I would recommend increasing the specificity of the rules are are writing so you do not need to use !important at all. Your future self will thank you for it.
With the LESS preprocessor, you can nest CSS code inside other CSS code, like this:
.Element {
.AnotherElement {
background-color: #FFF;
}
.YetAnotherElement {
background-color: #000;
}
}
This would make the background of .Element .AnotherElement white, and it makes .Element .YetAnotherElement have a background color of black. It does it all without writing it out like:
.Element .AnotherElement {
background-color: #FFF;
}
.Element .YetAnotherElement {
background-color: #000;
}
Does the first example coincide with CSS syntax, or do I have to use the LESS preprocessor?
Nesting is a feature of LESS and SASS, not native to CSS.
This is one of the most common uses for CSS preprocessors, but they offer a lot more too.
No, css doesn't support this syntax, in your css example the "Element" and "AnotherElement" will to receive this properties, AnotherElement will not inherit properties of Element.
Precursor:
Under normal circumstances, I would never do this.
I have a CSS file that I am currently collaborating on with another person. I built the file initially, then they have added rules to it after the fact. But, instead of adding rules to selectors that already exist, they have duplicated selectors everywhere. I don't even want to get into how disorganized the file has become. The problem is that the duplicated selectors are spread out all over the file now and it could take some time to sort it out.
Anyway, I am currently in the process of trying to clean up the file. I have tried beautify, css format, etc in my editor (ST3), which cleans up fine but still leaves the duplicate selectors. I have tried various online tools like CSS Lint, ProCSSor, Dirty Markup, CleanCSS and so far none of these tools give me the desired result.
Is there any way that these selectors can be merged by some other means instead of manually?
Here's an example of my situation, just for reference:
I'd like to turn this...
.sameClass {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.differentClass {
border: none;
background: black;
padding: 0;
}
.sameClass {
font-weight: bold;
font-size: 24px;
display: inline-block;
}
into this...
.sameClass {
float: left;
width: 100%;
margin: 0;
padding: 0;
font-weight: bold;
font-size: 24px;
display: inline-block;
}
.differentClass {
border: none;
background: black;
padding: 0;
}
CSSO (Github project) is the tool will help you merge identical CSS classes.
It can be configured to execute some cleaning, compaction and restructuring.
Test in sandbox here : https://css.github.io/csso/csso.html
// Input
.card {box-shadow: none;}
.foo { color: #ff0000; }
.bar { color: rgba(255, 0, 0, 1); }
.card {border: 1px solid grey;}
// Output compacted + merged
.bar,.foo{color:red}
.card {box-shadow: none;border: 1px solid grey;}
A simplistic approach would be to sort your CSS file(s) by selector. This can be done by considering each rule as a "paragraph" (meaning you will have to ensure there are empty lines between rules, and nowhere else), and then using your editor's "sort paragraph" feature, if it has one. For instance, emacs has the M-x sort-paragraphs command.
Once multiple rules for the same selector are grouped together, you can manually go in and combine them.
Is there a way to simplify the following css rule so that .x-grid-row selector won't have to be repeated?
#OpenRequestListGrid .x-grid-row, #MyRequestListGrid .x-grid-row {
line-height: 13px;
padding: 0 1px;
vertical-align: top;
background-color: #BBB;
}
Important issue here is that I don't want to specify .x-grid-row by itself as this rule is from a larger library.
Note: maybe I wasn't clear the first time but I don't want to use .x-grid-row as this will effect other grids that I want to leave alone. I would like to target just my two grids. What I am aiming for is not repeating the same config twice one for each grid ID.
HTML sample :
<div id="dontChangeMe" class="x-grid-row">
<div id="OpenRequestListGrid" class="x-grid-row">
<div id="MyRequestListGrid" class="x-grid-row">
CSS doesn't have variables, but when you want to select all elements .x-grid-row in your document, you should simplify it to:
.x-grid-row {
line-height: 13px;
padding: 0 1px;
vertical-align: top;
background-color: #BBB;
}
Or just search for a common parent of your .x-grid-row when talking about a partial scope and use it like:
#common-parent .x-grid-row {
...
}
or
.common-parent .x-grid-row {
...
}
or any other css selectors ;)
EDIT
I just reread your question and you could also use a global selector like .x-grid-row {...} when you want to address a lot of elements and just specify more selectors like #inner-box .x-grid-row { ... } to change values back to default for only few elements.
How about just using .x-grid-row or using a selector which is a parent to both #OpenRequestListGrid and #OpenRequestListGrid.
So the Answer is there really isn't another way. Repeating element id and then the same selector is necessary. Thanks to all those who replied.
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.