I'm currently trying to override a piece of styling made earlier in my code to my section-header with the padding, but having difficulty in doing so. I'm trying to center the section header on desktop sizess only.
My original section-header is like this:
.section-header {
padding-left: 10%;
}
And my media query is like this:
#media #{$desktop} {
.section-header {
padding-left: 0;
text-align: center;
}
}
I've already used !important but my mentor tells me to avoid it. How can I override this and make this change?
CSS works in multiple ways and can become a mess which is why your mentor mentioned not using "!important" where possible.
One thing to note is if your section rule is after your media query rule, it will override the media query rule.
Also, consider specificity. The more specific you are with your targeting the more important that rule is.
Quick question. Have you opened it up in Inspect to see whether it's even showing? So possible cache clear issue etc?
If it shows in inspect element, it might worth checking whether there is something with higher specificity overriding it.
It's hard to give a fix above the above without seeing but that won't be accepted on here...
Related
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.
I'm using media queries to make my site resposnive. In my CSS doc, the media queries are below all other styles. I'm am using diplay: none; which works perfectly but on another div the original width is taking priority even when I reduce the browser size.
Image of dev console:
Do I really have to add !important to every media rule?
CSS:
#media screen and (max-width: 930px) {
/* INDEX */
nav ul {
display: none;
}
#sliderContainer {
width: 80%;
height: auto;
}
}
The rule at line #112 in index.css is also applied by #sliderContainer and not by nav li, as you state in your question (it can be seen in the image you posted). Because it is met later and has same specificity, it applies.
If you place !important on a rule, you'll probably need to use !important when trying to override it, and before you know it, half your rules will be !important and fixing responsiveness is going to be a nightmare. Either slightly increase specificity of your rule or change their order.
Very important note: #media queries do not add any specificity to CSS rules. They just make them apply (when conditions are true) or not (when not true).
Useful note: A very good technique to always keep specificity of your selectors as low as possible is to place your custom stylesheets last inside <head>, after any theme/libraries/plugins stylesheets. Whenever you need to override anything, you just copy-paste the selector from where it is currently defined, and only placing it in your custom stylesheet will make it have priority without higher specificity.
Adding !important tags to your media queries may be necessary, should you need to override styles provided by a pre-set template or development platform. For example I work with Squarespace, and have to override their default styles from time to time in this way - however, as with myself, I can understand your aversion towards doing so.
I know I'm not supposed to "ask for clarification" here, but my lack of rep prevents me from simply making a comment: are you working on a web develop platform similar to Squarespace, Weebly, etc., and does applying the !important tag in fact achieve the desired result?
Best,
Tyler
So this is a strange bug I cant seem to figure out.
Im using Meyers reset in my app. But when I edit my main css file to change the h1 font size, it will not change it. But when I put it in the body tag it works. Could anyone explain this to me?
Example
base.css.scss
h1 {
font-size: 2em; //--This doesnt work
}
body {
width: 100%;
height: 100%;
h1 {
font-size: 2em; //-- This works
}
}
Make sure to include the reset file before your base.css.scss file. Looks like it overwrites the h1 rule.
There are three possible causes to this issue. First, make sure you are not trying to use SASS in the browser. It will need to be fully converted to plain CSS before you can use it there. Second, make sure the selector you're using has a higher specificity. That is, make sure the selector is more specific than another selector setting the property. body h1 has a higher specificity than just h1. Though, in Meyer's reset, that shouldn't be a problem. Third is order. If two selectors have the same level of specificity, the one that comes later gets priority. Make sure your reset comes before any other CSS on your page.
you've redefined, so the second assignment of H1 does not work, although you can use! important but I'd better not
Because the second one has a more specificity than the first one: in this case body h1 has more power than h1
The issue you are having is two-fold. There is a specificity issue as well as a cascading issue. You aren't going to be able to override a style before it is declared without using and !important. So your override should be after the reset.
You will also want to match the selector you are trying to override. So if your reset is targeting the element with the body and h1 selectors, do the same to override the styles.
body h1 { font-size: 2em; }
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
It seems there are two major schools of thought on how to structure CSS and HTML. I was taught to keep the HTML as clean as possible, and all things stylistic should be on the stylesheet. This has served me well thus far, but with this approach I often notice redundancies and inefficiencies.
I read up on the atomic approach, and I really like the idea. It seems to be the method I naturally gravitate toward anyway.
My question:
Which way is really faster, considering the two following blocks of code:
HTML:
<div class="main">
<h1 class="m-10 theme-c1">header with margin and theme color 1</h1>
<p class="fz-1 theme-c1 m-10">paragraph with font-size 1em.</p>
<div class="m-10">
<p class="fz-1 m-10">blah</p>
<p class="sub-paragraph">Sub paragraph</p>
</div>
</div>
Stylesheet:
/*margin-left rule*/
.ml-10 {margin-left:
/*font-size rule*/
.fz-1 {font-size:1em}
/*theme color*/
.theme-c {color: #333};
/*display rule*/
.dps-blk {display: block}
/
/*sub paragraph styles*/
.sub-paragraph {
margin-left: 10px;
font-size: 1em;
font-color: #333;
}
Elements in the HTML above all get whatever style they need, and the styles above are non-descendants except for .sub-paragraph.
So is it faster for each element to cherry pick which styles it needs, or is it better to just give it a chunk of styles (like for .sub-paragraph)? With .sub-paragraph, I can see how it only takes one match to get all the styles. The trade off, however, is that there isn't much else you can do with that set of styles except use it on sub-paragraph, or override some of its properties with another rule when applied to something else.
I'm think with these two approaches, it's a decision on whether to the cost on data size or on processing time.
Edit
I appreciate all the feedback. I forgot to mention that I'm specifically interested in the processing speeds of the different approaches.
This is interesting nonetheless.
If you were to begin cherry picking individual styles, you would end up with a stylesheet like:
.red{ color: red; }
.green-background{ background: green; }
.w500{ width: 500; }
.ml20{ margin-left:20px; }
Which is not very maintainable.
It sounds like what you are looking for is a way to extend certain classes (i.e. .sub-paragraph) with pre-existing classes, adding the styles of other classes into .sub-paragraph. SASS's .extend directive is a great way of doing this.
Sass and other preprocessors are great at merging the ideas of maintainable code and semantic code together.
Edit 1:
If you are looking into which method (more classes/less properties or less classes/more properties) is faster, I would suggest doing some testing with Chrome Dev Tools' Timeline. The two methods of coding aren't the only thing that are going to affect how fast a page renders/paints, so it is always a good idea to test these if you are concerned about speed.
I organize my CSS by grouping certain types of classes together. When creating CSS classes I ask myself, am I going to reuse this class definition for anything else? Is it logical for me to separate this class' definition, will someone who has to read this after me want to shoot themselves?
Basically I would say, go for maintainability, an extra 1Kb on your Css will not choke anyone.
CSS is designed to use classes for certain groups of styles. The .sub-paragraph method is usually way better than the seperate classes method. If you are going to assign classes for each style seperately, you might as well just use inline styles, via the style attribute. You should usually try to avoid that for maintenance reasons though.
I think there is a place for both.
I don't feel that the abstraction belongs at class names like .p1-gr-brdr, though.
If you're writing very tightly-composed, atomic HTML partial-templates (for things like AngularJS directives), then you'd likely get more mileage out of .title, .subtitle, .just, .content, where you can specify very specific output for those components.
Changing those components will be very simple and straightforward, as they're so compact and self-contained.
And if you find yourself in a position where you need to override one, to compose an inherited class, then you either have the option of composing a new class-name, which now might not be 100% semantic/generic (".big-green-subtitle"), but is still 100% self-contained for those moments where you want your special-cases to feel loved, too...
...or you can then specify behavior with a second-level selector.
If your .header has a padding, but you don't want your .update > .header > .subtitle to be subject to that padding-bottom, on mobile-phones, in landscape orientation, on Tuesdays, then you can simply have an exception which states .update > .header { padding-bottom : 0; }.
Otherwise the cascade will continue as normal, and things will either pile on top of one another, or you will cancel out side-effects with specialized classes which cover the same properties...
Otherwise, I don't see why all CSS sheets don't look like:
.p1-br { border-width : 1px; }
.p2-br { border-width : 2px; }
.p3-br { border-width : 3px; }
.p4-br { border-width : 4px; }
.gr-br { border-color : green; }
.lgtgr-br { border-color : lightgreen; }
.sfmgr-br { border-color : seafoamgreen; }
.aqmr-br { border-color : aquamarine; }
.em1-wd { width : 1em; }
.em2-wd { width : 2em; }
.em3-wd { width : 3em; }
.rm1-wd { width : 1rem; }
.pc1-wd { width : 1%; }
...et cetera, until you've written out every atomic option you could possibly want, for any theme your project (and all of its components) might want to support, across all platforms.
That seems like a terrible use of your day, to write a unique class-name for every possible edge-case out there:
<div class="pos-rel
p1-br
p18-ng-tp
mrpc12-br-r
lggr-bg
bg-im-spr-id-123
pc15-bg-im-algn-lf
ofl-x-hd
ofl-y-aut
brd-bx">
Seems hefty for a single div, for instance.
This would not, however, be a bad idea, if you could write CSS rules, give them to classes, where you expect flexibility, and later had the hard-numbers to those rules.
Such that, say, you write out a class which expects to treat height in rems, margins in percents, border-radius in ems, will take a background-colour and an image-sprite (say it's a backdrop container for a corporate/retail site, with a watermark and logo, where other content will scroll above it).
Now you want to reuse that set of classes on the same component, but for a different client...
It would help if you could simply have some variables, which could live in a separate file, and be referenced by your classes, so that your units don't necessarily need to change, but you can modify all of your hard-coding stuff in one or two places, and swap different variable values in for different clients as easily as pointing at a different sheet...
...but that's what SASS already does, if you take the time to sit down and figure out how you want to engineer something, and make your build process adhere to that desired outcome.