I am picking up my icon color from icon--apply instead of .classname__icon--apply. Doesn't this violate CSS specificity rules? Am I missing something here?
You're confusing BEM with specificity.
Don't think of specificity like a set of rules, it's more like a mechanism. A mechanism which decides which rule should be more important than others.
There's a whole bunch of selectors but for our purposes, we can break
it down into three types, of increasing importance:
Element selectors (and pseudo-element selectors) Eg. p {color:red;}
Class selectors (and attribute selectors) Eg. .myclass {color:red;}
ID selectors. Eg. #myid {color:red;}
https://snook.ca/archives/html_and_css/understanding_c
BEM is a naming convention for your CSS classes. You can decide if you want to use it. It's optional.
The Block, Element, Modifier methodology (commonly referred to as BEM)
is a popular naming convention for classes in HTML and CSS. Developed
by the team at Yandex, its goal is to help developers better
understand the relationship between the HTML and CSS in a given
project.
https://css-tricks.com/bem-101/
Another naming convention would be Atomic CSS, where you use a lot of small, single purpose classes - for example .color-red.
You can read more about it here: https://css-tricks.com/lets-define-exactly-atomic-css/
Related
One of CSS lint rules is: "It's better to not use IDs in selectors".
So, what should we use instead of IDs to point to a unique element?
For example, say I have dozens of elements that have a class named my-class, and I want only one of them to have a special CSS property. What can I do?
CSS-lint should be 'fixed' or rather updated to modern standard because its based on more than 10 year old code base where support for IE6 and IE7 where still preferable.
Nowadays everyone should know ID's are the fastest css selectors followed by Classes, Dom tags, adjacent siblings etc. And that CSS reads from right to left. So the shortest selector is the fastest. Since #ID is the fastest selector and #ID (should be) unique its ridicule to not use the #id as selector in CSS.
give them another class for example:
<div class="myClass special"></div>
.myClass.special{
color: red;
}
You could add an additional class to the element and specify it in your css instead of ids. ID selectors have a higher specificity than attribute selectors but using ids in css isn't recommended and can't be reused. CSS classes can do everything IDs can.
Lets imagine very simple case:
div.className{}
vs
.className{}
Which option is faster and why ?
.className{} is faster in downloading, because of smaller size of the css file.
It is also faster when rendering page, because it is not necessary to look for div elements.
A guideline from google:
Avoid qualifying ID and class names with type selectors. Unless
necessary (for example with helper classes), do not use element names
in conjunction with IDs or classes.
Avoiding unnecessary ancestor selectors is useful for performance reasons .
One very important difference between div.classname and simply .classname is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
ne of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.classname rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.class) in its selector declaration (div.class).
Of course the div.class rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
For Example
Find some more info
Follow Up
I'm wondering if there is a performance issue using attribute selectors instead of class selectors.
div.test {}
div[test] {}
P.S. : I'm only interested in CSS performance, not JS.
According to this article, class selectors are more efficient than attribute selectors.
Someone has actually created a real life selector test that showcases selector matching performance.
The table outlines that attribute selectors are approximately 3x slower compared to standard classes.
Relying on attribute selectors also requires more characters to target an element. It's better to define short and concise class names to keep your stylesheet small.
Example:
// 17 Characters (attribute)
[title="example"] {
...
}
// 6 Characters (class)
.title {
...
}
http://scope.bitbucket.org/tests/selector-matching-performance/
According to this project there is no real performance issue.
This surprised us, since selector performance hasn't been a real
concern in our day-to-day work for a while. Front-end performance is a
huge deal, of course, but CSS selectors appear to contribute such a
minuscule amount to the total page load time that it didn't occur to
us that it might be a major concern to many people.
They have benchmarks as well.
EDIT: see comment: they have benchmark ideas*, not benchmarks.
https://github.com/amcss/am-benchmarks
There is no performance issue. Both act same. But there is difference in specificity of the css with class versus Elements.
Specificity - Specificity determines, which CSS rule is applied by browsers.
If two selectors apply to the same element, the one with higher specificity wins.
But specificity has hierarchy.
Inline styles (Presence of style in document).
An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g.
IDs (# of ID selectors)
ID is an identifier for your page elements, such as #div.
Classes, attributes and pseudo-classes (# of class selectors).
This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements (# of Element (type) selectors).
Including for instance :before and :after.
Source: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Hence div.test {} is more specific.
In css, I have seen both div.selector and selector being used to define styling rules for a specific selector.
What's the difference between the two and what are the reasons I should consider when adopting one over the other when writing my own css files?
div.selector targets only div elements with a class of selector.
.selector targets ALL elements with a class of .selector not just DIVs
So prefix element with tag name if you KNOW that's the one you will be applying css to. The later approach is more generic and targets all elements with specified class. However, you should be specific whenever you can.
If you know only div elements will have .selector class, going specific is better in terms of performance eg div.selector rather than .selector which will look for all elements on the page but will eventually apply those styles to DIVs only.
div.selector is a more specific selector than .selector.
For example of you have this HTML:
Link
<div class="selector"></div>
The selector div.selector only matches the div where .selector selects both elements.
As mentioned so far, prefixing your class with its element name (ie: div.selector) will select only elements which are divs, but exclude anything else. With this in mind you can create classes which can be applied to multiple elements and/or target a single element.
In terms of readability, prefixing your classes can help you and your team identify what the element is from within the css. However in terms of general best practise and performance it is commonly advised that you try to refrain from prefixing your class and id declarations as it causes additional work for your users' browser engine.
By prefixing your classes (ie: div#selector or div.selector) your browser has to locate the class and then identify whether it is of the div type). Whilst the time required to do this might be negligible, I feel it's still worth mentioning.
Below are a few helpful links on the matter of performance and practice:
https://developer.mozilla.org/en/Writing_Efficient_CSS and
http://css-tricks.com/efficiently-rendering-css/
Ok, I've been reading through stackoverflow css selectors. on the thread here what is the differences in this syntax? What does the ^= mean? What is it selecting? all?
[class^='Rating']
and
div.Rating0_5
Also, there's a statement here that reads:
Note: Repeated occurrances of the same simple selector are allowed and do increase specificity.
What does that mean?
I'm asking because I'm having to clean up alot of CSS code on a website. There are over a dozen stylesheets each containing 200+ lines of code, and there are styles that are overriding each other among the stylesheets, maybe even within them if repeated occurences increase specificity. It's painstaking to go line by line through the stylesheets to find out what particular class, div, etc is over-riding another and some of the specificity is seven selectors deep! It's almost impossible for me and very stressful.
Is there a tool to use that will target styles overwriting other styles? Is it easy to use and what does it do exactly? If not, how can I write my CSS with enough specificity without having extremely long selectors to hopefully ensure uniqueness so that they will not be overwritten by another stylesheet of rules?
Thanks, I hope this makes some sense and someone has had this experience.
^= is "starts with" for CSS selector. In your case it will apply to classes with names starting with "rating".
With traditional CSS you do have to make really long selectors to be specific and I think the statement meant you can have duplicate selector and the styling will be combined.
In terms of cleaning up the CSS I don't have a good suggestion for an automated tool but you can take a look at http://sass-lang.com/ (SCSS) for a better syntax layer on top of CSS that does variable and inheritance of selectors. Does clean up CSS a lot.