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.
Related
I use:: ng deep of css style. I can change browser CSS. but it is not solved in my CSS code in angular 10.
here is my code:
> ::ngdeep .carousel-arrow {
> background-color: lightblue;
> background-position: 50%;
> background-repeat: no-repeat;
> background-size: 31px;
> border-radius: 100px;
> box-shadow: 0 0 5px rgb(0 0 0 / 15%);
> cursor: pointer;
> height: 40px;
> margin-top: -20px;
> position: absolute;
> top: 50%;
> width: 40px;
> z-index: 10;
}
You have to get through Angular's view encapsulation in order to create a custom theme for the carousel component.
The best way to do this is by globally include a scss file.
You could create a theme e.g. carousel.theme.scss then you could import that via
#import '<path/to/file>/carousel.theme.scss'; in you root styles.scss
In order to really get throgh the Angular view encapsulation it could additionally be necessary to use !important to reach your desired result.
:host::ng-deep (that would be the correct syntax) is considered deprecated and should not be used anymore.
Try this: First, change ngdeep by ng-deep. Then, add !important to each style
::ng-deep .carousel-arrow {
background-color: red !important;
}
instead of
::ngdeep .carousel-arrow
This way it works just fine.
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/
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.
I have just started to explore GWT, and i'm bit confused with different ways of applying styles to GWT widgets.In gwt docs, there are 4 ways by which you can override default style of a widget,
1) Using a tag in the host HTML page.(Deprecated)
2) Using the element in the module XML file.(Deprecated)
3) Using a CssResource contained within a ClientBundle.
4) Using an inline element in a UiBinder template.
Suppose i have a CSS file in some package say, com.abc.xyz.styles.css .And the file has the following contents,
/**the panel itself**/
.gwt-TabLayoutPanel {
border: none;
margin: 0px;
padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
background-color: #6F6F6E !important;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
font-family: Arial !important;
}
/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
border: none;
margin: 0px;
overflow: hidden;
padding: 15px;
}
How will i inject this css file ? How can this be done using the 3rd and 4th option of styling mentioned above?.
You can simply add your CSS file to the host page. Then you can use the full power of CSS selectors. This is my preferred method of using CSS in GWT:
What the best strategy to structure CSS in GWT?
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.