When combining a class and ID in CSS is it better practice to use .class#id or #id.class? Does one have advantages over the other, or are they treated exactly the same by every browser? Thoughts?
They both point to the same element due to that id selector, so they work the same way.
As for advantages, I feel that .class#id is suited more for specific cases of a .class element (like a sticky post in a blog), and a #id.class is just an extension of the #id element's stylesheet.
I'm not sure if this is common practice, but I find it helpful.
I believe you can find some useful information here:
How to combine class and ID in CSS selector?
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.
This question already has answers here:
What is the difference between id and class in CSS, and when should I use them? [duplicate]
(15 answers)
Closed 7 years ago.
So I often use a website LiveWeave.com to test HTML, CSS, and JavaScript code that I've written. It has a syntax checker, and whenever I use an ID as a selector in the CSS section, it says that it is improper to use an ID as a selector.
I have demonstrated it in this Weaver. To the right of line three in the CSS window is a yellow icon, which, when hovered over, says that it is improper to use IDs as a selector. I was under the impression that that is specifically for the purpose of being used as a selector for a single DOM element, as opposed to classes, which are designed to be applied to multiple DOM elements.
Am I wrong? IS it improper to use an ID as a selector?
The only other instance I can think of an ID being used is for JavaScript document.getElementById(), and similar functions. What is the proper use of an ID?
Note that I am NOT asking the difference between an ID and a Class, but rather whether it is proper to use an ID as a selector.
Using an ID is the most efficient way of selecting a DOM node in both CSS and Javascript. I personally like to use classes for all repeated items and ids for unique items, or unique configurations of repeated modules. There are many CSS patterns, I use a style called BEM (Block, Element, Modifier as seen here) which is a class based naming convention. Look at your favorite websites, right click or inspect. You will find that there is no one right answer to your question, only many right answers.
May I also say that both exist in the standard for a reason and serve a purpose depending on your applications needs.
Below is the order of efficiency for selectors. IDs are the most efficient and pseudo classes and pseudo elements are the least efficient.
id (#myid)
class (.myclass)
tag (div, h1, p)
adjacent sibling (h1 + p)
child (ul > li)
descendent (li a)
universal (*)
attribute (a[rel=”external”])
pseudo-class and pseudo element (a:hover, li:first)
See here...
It is not improper to use ID's as selectors, so long as the ID being used corresponds to only one element in the DOM (document object model).
If you'd like a selector that is multi-purpose, and able to be applied to multiple elements in the DOM, use a class. Although I'm sure you knew that.
The main reason ID's are frowned upon by some CSS developers, and full stack designers, is simply because they aren't as versatile and they have a higher specificity than classes, which can either help or hinder development (based on CSS knowledge).
For more information on CSS specificity, read here: https://css-tricks.com/specifics-on-css-specificity/
It's valid, it's just considered bad practice by some developers because it can make it difficult to maintain your CSS if you're not disciplined about it. I'm no expert on CSS but I'm pretty sure it's all to do with #'s having a really high specificity rating and if you have them dotted around your CSS files it makes it difficult to manage the cascade i.e. inheritance of style rules. So it's considered best by some to use IDs only for referencing elements in your JavaScript.
I've actually heard this argument before.
Some people push the idea of using solely classes for pure css stuff and keeping id for javascript and other id specific functionality.
It would seem that website follows that ideology, so they are trying to get their users to adopt it. I'm not sure if it is yet best practice to keep id out of css
You can decide for yourself whether an id is worth using, when you could just use a class instead.
If you used an ID as a selector and your using it in your Javascript too then you could make situation where if you decide to rename it then you've created a dependency that wouldn't be there if you had used a class name in your CSS.
Also, though using the ID is faster, it isn't faster if you then use #text a - since CSS reads right to left and has to check all the anchor elements first and then find the one with the ID of #text.
This also means the style isn't reusable and you can't use multiple classes either.
So I think the answer really is, based on all the pros and cons of using an ID as the selector, the best practice to keep you out of possible future problems is to not do it. Of course, this all really depends on how you code, the scope of the project and how many other people are working in the project. It's not against the rules, just not really best practice due to possible issues you might be building in that could bite you later.
On top of what has already been mentioned, even in CSS, ID's can be useful depending on what is the structural design.
For example; if every page in your website requires a header and a footer, I don't see why it would not be useful to make it an id.
What is wrong with doing:
#header {}
#footer {}
If you know for sure that your page has only one header and one footer, I don't see the point in using a class.
Mentioning the id is very specific and the page structure is undubious in this case.
Moreover, I also don't see what is wrong by doing something for example like:
.menu{}
#header .menu li{}
#footer .menu li{}
To add specific styling depending on the page segment. Seems very legit to me.
Ultimately, I even think that using ID's to indicate page sections might be more beneficial by ´knowing´ that they are unique (although they might be recurrent across different pages).
Reading an id in a CSS file should give the CSS designer the benefit of immediately knowing what page segment the following css rules are referring to.
A sheet with only classes would in that case seem less clear than using ID's imo.
Does a css class selector always require a definition? For example, if you found in the html: div class="banner", should you always find a .banner in a css file? I ask this question as I've been looking at some website themes and I sometimes find these selectors without any other reference. I'm just not sure if it's an oversight or something common.
There are many reasons to have class names on your HTML elements without having CSS rules associated with them. A couple of examples:
More readable markup. If a component is properly labeled, it's easier to find, debug, or work collaboratively on.
Javascript. Sometimes an element requires some Javascript behaviors, but doesn't inherently need CSS styling itself.
So to answer your question: No, you do not need to define each class or selector in your CSS.
When working with css selectors we face many choices how to select an element (using combined selectors, using ids or classes). I am asking if there are any guidelines and best practices about how to make a choice about selectors and classes/ids to have maintainable websites with easy portable parts ?
I find this article helpful - https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
If I'm getting your question right, the choice on which selectors to use will depend on good mark-up as well as appropriate naming of classes and ID's.
Generally, know your target audience and what browsers they use. For instance, you can use something like:
p + ul in IE7, but only if, in your html code there are no comments or elements between a p and the next element, which in this case is a ul.
So knowing what browsers your site is dominantly viewied with is the first thing really. Then, you can work backward or forward as needed.
In the end, it's about IE7+ and whether your user base is using that because there are many kinds/types of selectors that only work in later browsers.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Cascading style sheets use “id” or “class”
When should i use an id v/s class in my css file.
I know that id is used when it is a unique element.
For all practical purposes if I assume that none of the elements are repeating what should I use?
The design decision comes from practical use. As I'm sure you're guessing: yes, it is perfectly standards-valid to use classes for everything. If you ever need to manipulate elements (take a look at jQuery), though, it is much easier to work with an id rather than a group of elements in a class.
You seem to understand: ids for unique elements, classes for multiple elements with the same design/purpose.
A good heuristic approach to think about is that the id is like the name of the element for if you want to refer to it specifically and the class is for properties of the element that some other elements around your site might have also.
Another thing to think about is specificity, which is the rules for when one css rule overrides another. Here is a good read for that: http://css-tricks.com/specifics-on-css-specificity/
ID has a higher selector specificity than a class. This means that if you have a class and id competing for properties, the id css properties will most likely overwrite the class properties. If I am correct, an ID is worth 100 points, a class selector is 10 points, tag selector is 1 point, and an in-line style is 1000 points. The higher the amount of points, the higher specificity and the higher it has a chance to overwrite the other selector properties.
Hope this helps.