If I have two css files:
File 1:
.colorme
{
background-color:Red;
}
File 2:
.colorme
{
background-color:Green;
}
And have included them in a page, which one will take priority? I'm guessing the one that is loaded last? If so is there anyway to ensure which one css file is loaded last?
The one loaded last (or as David points out, more accurately included last) wins in this case. Note that it's per-property though, if you load 2 definitions with different properties, the result will be the combination. If a property is in both the first and second, the last wins on that property.
The only way to ensure which is used last/wins is including the <link> elements in the order you want in the page.
For the property, here's an example:
.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css
.class1 { color: blue; margin: 2px; } //Second .css
is equivalent to:
.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; }
Related
I'd like to use Sass to create a reusable HTML snippet with default values, but then make those values optionally customizable. Let's say I'm making a button and I set up some base SCSS to make the button red by default like so:
%button-shared {
$button-color: red;
td {
border-color: $button-color;
color: $button-color;
background-color: white;
text-decoration: none;
width: 50px;
height: 15px;
border-radius: 6px;
}
}
I use a variable because I want it set in two different places. In this example, I want a white button with a colored outline that matches colored text like so:
Now let's say I give my two buttons in HTML different classes, button-one and button-two. Now I'd like to assign that SCSS to my two buttons, so I extend %button-shared to those two HTML classes. Except, I'd also like button-one to be a different color from the default red:
.button-one {
$button-color: green;
#extend %cta-shared;
}
.button-two {
#extend %cta-shared;
}
Unfortunately, this implementation ends up with them both being red. How can I setup my SCSS to allow for easy overriding of of a variable?
Use mix-ins: https://sass-lang.com/documentation/at-rules/mixin
#mixin button-shared($button-color: red) {
td {
background-color: white;
border-color: $button-color;
color: $button-color;
text-decoration: none;
width: 50px;
height: 15px;
border-radius: 6px;
}
}
.button-one {
#include button-shared(green);
}
.button-two {
#include button-shared();
}
1. Summary
I have list of selectors, to which properties should always apply.
For some selectors must be additionally added another properties.
I can't find, how I can do it without duplicates.
2. MCVE
2.1. Expected CSS
.KiraFirst,
.KiraSecond,
.KiraThird {
color: red;
}
.KiraSecond {
background-color: yellow;
}
In example, I use class .KiraSecond 2 times. Can I get expected behavior without this duplicate?
2.2. Stylus
Live demo on stylus-lang.com
.KiraFirst
.KiraSecond
.KiraThird
color red
.KiraSecond
background-color yellow
This is compiled to expected CSS, but I still use .KiraSecond 2 times.
I don't understand, how I can not use duplicate. For example, syntax as this not compile to expected CSS:
.KiraFirst
.KiraSecond
background-color yellow
.KiraThird
color red
Result:
.KiraFirst,
.KiraSecond {
background-color: #ff0;
}
.KiraThird {
color: #f00;
}
3. Not helped
Stylus official documentation include Selectors section
Stack Overflow Stylus questions
Stylus GitHub issues
Maybe you can use basic class for all elements? For example - .Kira and if you need to specify something for other elements you can add extra class .KiraSecond or use .Kira:nth-child(2)
in your example it can be something like this
.Kira {
color: red;
}
.KiraSecond {
background-color: yellow;
}
or
.Kira {
color: red;
}
.Kira:nth-child(2) {
background-color: yellow;
}
You (can't)? and you shouldn't.
Duplicating that selector in that case is not a bad practice.
you are not duplicating the same property/value for many classes
you can clearly override specific property
you can clearly modify/change behaviour for specific class
e.g:
.class1, .class2, .class3 {
color: red;
background: yellow;
border: 1px solid;
}
.class1:hover {
color: blue;
}
.class2 {
border: 2px dotted;
}
.class3 {
color: pink;
}
What would be a bad practice in that case (with no selector duplication)
.class1 {
color: blue;
background: yellow;
border: 1px solid;
}
.class2 {
color: red;
background: yellow;
border: 2px dotted;
}
.class3 {
color: pink;
background: yellow;
border: 1px solid;
}
Is there any automated way to get CSS property and value with its selectors from one giant CSS file? For example,
.selector1 {
border-radius: 3px;
color: #000;
text-align: center;
}
.selector2 {
background-color: #000;
padding: 10px 20px;
}
Now I want to extract CSS below from CSS above based on #000 color value.
.selector1 {
color: #000;
}
.selector2 {
background-color: #000;
}
Finding and editing manually in text editor works, but this approach is hard to accomplish after CSS is changed which is changed frequently. So I wonder if there is any automated way to do that.
I thinks this is not possible with css but you can achieve it using JavaScript.
Let's pretend that I am using a CSS library (e.g. Bootstrap) that has its own CSS files together with a custom theme.
In Bootstrap's CSS, there might be a rule like this:
.foo {
border: 1px solid black;
padding: 4px;
}
And in my custom theme, .foo is overridden as:
.foo {
border-color: red;
border-width: 2px;
}
The effective, computed rule is gonna be:
.foo {
border: 2px solid red;
padding: 4px;
}
Is there a tool that given a set of one or more CSS files, can produce this reduced, minimized, effective CSS output?
I new to CSS/CSS3 and I read in many places different way to build CSS files. Some people all tags in the same elements and some people divide elements and then use different classes in the HTML code.
eg:
// css
h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
so in the HTML they just have to put and that's it. If you need to change the border color then you have to change ALL tags that has the border-bottom.
OR
h1 { font: normal 20px Arial; }
h2 { font: normal 16px Arial; }
.colorBlack { color: black; }
.headers { margin: 1em 0; padding:0; }
.borderBottom { border-bottom: solid 0.1em #ddd; }
and in the HTML you use:
<h1 class="black headers borderBottom">h1</h1>
Very easy but everytime you have to put all the CSS you need
Is there any Best Practices on how to build CSS? Which way is better for performance or loading time?
I recommend to use:
h1, h2 {
color: black;
margin: 1em 0;
padding: 0;
border-bottom: solid 0.1em #ddd;
}
h1 {
font: normal 20px Arial;
}
h2 {
font: normal 16px Arial;
}
The best practice: Keep your code readable. Readability is not achieved by separating a style definition in several useless classes.
Usually, you want the h1 and h2 tags to have similar styles. For that reason, I've grouped the styles. When you want another property value for a certain element, you can add another CSS definition. When the selector has a higher specificity, the new declaration will override the previous one(s).
I think both technics are useful. Personally I often put two or more classes when I need to separate one element from another (example last in row element should not contain margin-right) my code looks like:
HTML:
<div class="images-row">
<div class="image-item">...</div>
<div class="image-item">...</div>
<div class="image-item">...</div>
<div class="image-item last-in-row">...</div>
</div>
CSS:
.image-item {
border:1px solid red;
margin-right:20px;
width:200px;
height:200px;
}
.image-item.last-in-row {
margin-right:0;
}
(supported well in IE > 7 and other good browsers). This solution keeps the code quite clean and also makes me write less (I don't need to rewrite all the styles for the last element or add separate selectors). jQuery element handling is less confiusing (I need only one selector to match all .image-items).