I have one simple question that I couldn't find a definitive answer for as of yet. I want to change the styling of a website that already has extensive CSS applied. I cannot remove or edit these existing files, only add my own. Is there a way to override all existing CSS styles, or even remove them, through a new file? Or is the only solution to override each style individually, by using more specific selectors, the !important keyword, and so on?
I am very new to web design, so I hope you'll forgive this (maybe very simple) question.
yes important can override it but there are specificity overriding also.
Example
<div class="main">
<div class="test-wrapper">
<div class="box s-1 h-1">
</div>
</div>
</div>
.main .test-wrapper .box{}
if I want to override this
increase the specificity
.main .test-wrapper .box.s-1{}
https://www.w3schools.com/css/css_selectors.asp
Related
I'm trying to dive into the BEM methodology. Even though it seems to be the 'must have' methodology for all project sizes, I'm kind of unhappy with it or am I just trying to use it the wrong way?
Using BEM the CSS gets divided into something like this.
.block {
/* Block code goes here */
}
.block--is-hidden {
/* Block modifier code goes here */
}
.block__element {
/* Element code goes here */
}
This seems to be pretty fine for me, as long as you do not reuse some code. Let's assume I'm using Bootstrap or any other CSS Framework/Library. Doing so I just want to use the grid. That being said my markup could look somehow like that.
<div class="container">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</div>
According to BEM this would be a no go. Instead all the grid classes should be wrapper up in our corresponding block and element classes. A possible way to achieve this would be through SASS and it's #include. For me this basically results in redundant code.
So my question right now is. Am I missing something? I mean, using BEM while for e.g. loading Bootstraps .container code into every single of my own block styling would just result in an massive output CSS file. Is my approach correct? And if so - would I really sacrifice initial loading time just for the idea of better organized CSS and better readable markup?
Is there a reason your blocks have to begin at the container level? I'm not sure if it's a violation of BEM methodology exactly, but I personally "begin" my blocks more at the html>body>.container level. So:
<html>
<body>
<div class="container">
<div class="cheesecake">
<h1 class="cheesecake__heading"></h1>
</div>
</div>
</body>
</html
With SCSS looking something like:
.cheesecake {
&__heading {}
}
And so on.
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.
In class we are teached to avoid creating ID's in your HTML so you can use them to identify that element in your CSS file. Instead we must use selector specifity as much as possible.
Take for example this simple HTML:
<body>
<div>
<div>
<div>
The div you want to style.
</div>
</div>
</div>
</body>
Is it better to use this:
body > div > div > div{
color: blue;
}
or give the element an id (let's take 'middle') and use this:
#middle{
color: blue;
}
What are the differences (if any at all) performance and usability wise?
The difference in speed between IDs and Classes in modern browsers is so negligible in real world situations it is really not an issue. Therefore current main-line thinking is to use classes where extra clarity and specifity is needed. This way you avoid specifity wars and balances maintainability with code purity.
<body>
<div>
<div class="more-specific-if-needed">
<div class="middle">
The div you want to style.
</div>
</div>
</div>
</body>
.make-more-specific-if-needed .middle {
/* cool styles */
}
Or even use chained selectors to gain extra specifity. You could then split styles in to separate structure based build styles and appearance based theme styles.
<body>
<div>
<div>
<div class="semantic-role theme">
The div you want to style.
</div>
</div>
</div>
</body>
.semantic-role.theme {
/* cool styles */
}
For further reading:
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
Why do browsers match CSS selectors from right to left?
Performance wise it's fastest to get an element by its id than it is to traverse the dom.
From a usability point of view I would be careful using too many id's since they can be only used once for an element.
So it's a question of what you think is more important and how many items we are talking about. Is the speed gain worth the losing of re-usability
Much better to use ID. Performance difference is minimal, and not the important point. I think code readability / maintainability is more important.
One advantage of using ID, is that you could move your element to a different part of the page, and it would retain it's style rules - without counting the containing elements.
I am trying to define styling for second sibling's child element based of first sibling's class.
Here is an example of what I am trying to achieve
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?
Help much appreciated.
Thanks,
Medha
As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:
HTML
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
CSS
.one.edit + .two .change { color: green; }
If not, you could easily accomplish what you're after with a little JavaScript.
Here You can find answer:
Complex CSS selector for parent of active child
Short answer copied from link:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that
satisfies certain criteria. A more advanced selector scheme (such as
XPath) would enable more sophisticated stylesheets. However, the major
reasons for the CSS Working Group rejecting proposals for parent
selectors are related to browser performance and incremental rendering
issues.
Update:
Now I notice the edit class required in the child. You cannot.
simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.
More here:
CSS selector for "foo that contains bar"?
.
Original:
Depending on which browsers you care about, this may work:
div.one + div.two > div.change {
color: green;
}
Reference:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live Example:
http://jsfiddle.net/Meligy/NVjq6/
Since I couldn't find anything on yui3 documentation, I kindly ask your opinion on below. What is the best practice and why?
<div class="yui3-u-1-3" id="logo">
... content
</div>
or
<div class="yui3-u-1-3">
<div id="logo">
..... content
</div>
</div>
Regards,
Castle
I consider best practice to use ID's on the purely layout specific HTML.
eg.
#outer-container
#wrapper
#sidebar
Having said that if there is any chance, even a remote one that you may have multiple instances of these in your page, then play safe and use classes.
There are some performance benefits (although it's almost negligible now, with faster browser rendering engines and speeds):
ID selectors are slightly faster in your CSS
ID selectors are more efficient as hooks using JS
Read this great section from Jonathan Snook's SMACSS e-book: https://smacss.com/book/type-layout
I would rather use CLASS over ID until something explicit, have been using yui3 grid since last 2 years for now. so far going great..
<div class="yui3-u-1-3 logo">
content
</div>
or
<div class="yui3-u-1-3">
<h5 class="logo">logo goes here</h5>
</div>