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 4 years ago.
Improve this question
I've read that type of selectors used in JavaScript (jQuery as well) matters if one wants to achieve better performance in speed, loading times, etc.
Does the same apply to CSS as well? If so which selector is better to use in DOM: id, class, or maybe nested? I'm talking certain elements here (like a specific <ul> and not all <ul>s in general).
I doubt it CSS could cause great rendering troubles in loading time and speed.
In my experience I've come to the conclusion you should keep your CSS nice and simple. I've seen things like:
.element1 {...}
.element1 #element2 {...}
.element1 #element2 .element3 {...}
But I'd rather go with unique selectors wherever possible and simply describe them as:
.element1 {...}
#element2 {....}
In my opinion optimizing CSS is quite tricky and you should do it carefully.
as I have read many times IDs are faster for finding elements than classes as elements with ID are stored as a hash table and the search is faster.
Unfortunately I don't know any resource to prove or reject this, but as I have already said I have seen this kind of statements a lot.
Two HTML elements on a page can not have same id so for single element handling it is good to use ID..
Same class can be used by many elements so for group operations it is good to use class..
In performance wise both works good for me
Related
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 1 year ago.
Improve this question
Instead of giving a background-color, border, etc. to each element, I decided to make a list of classes like red-background, blue-text, border-1px and others ...
Is it fine to do this or not. If not how I should then?
Example
Thanks for answers, I was just unsure about if I'm doing well or not. I will try to give a better naming.
That type of approach is called utility-classes and has been greatly spread by Tailwind CSS framework. Which makes use of small descriptive classes instead of already made and opinionated component classes like the ones from Bootstrap.
This approach has the multiple pros, like simplicity, composability, and reusability.
But they will also probably make your classes be really long for each of your html tags.
There is nothing wrong with this, it's a matter of what works best for you.
Some css libraries or frameworks use approaches like that.
For instance in bootstrap you can use hidden to hide an element via the display: none; prop.
This is refered in some places as utility/helper classes.
That's a good idea and a good approach to have several classes. But from the naming perspective, that's better to use names that will describe the behavior, instead of color or border with. Declarative vs imperative. For example instead of blue-text is better to use common-text, because your blue can easily become green/black gray later.
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 4 years ago.
Improve this question
I am using scss. I would like to know which method have best performances between addressing the child elements with their tag name or instancing new classes, and also which method is considered best practice:
.product{
&__image{}
&__header{}
}
.product{
img{}
h5{}
}
<div class="product">
<img class="product__image" src="" alt="">
<h5 class="product__header"> </h5>
</div>
It all depends on your HTML. Do you really need a class for every element?
My main rule of thumb is: if I need to style multiple items in a similar way and they are semantically or structurally related, add a class. In such a case, you would then simply use the class in your CSS to target all the elements.
.profile-pictures {max-width: 67%;}
However, if the elements are not related in any way or you are only targeting a single element, just use the tagname.
header h1, figcaption {text-align: center;}
The important part here is semantics. HTML5 is all about the linked web. Not only the relations between web pages, but also the clear structure of a single web page. In my opinion, semantically clear tags are part of that. A fellow developer should be able to read your code and get a feeling about the structure and make-up without actually seeing the result in a browser.
This also means that I am not at all a fan of classes such as product__image, because it is derived from a class and a tag. So how does it differ from .product img? Leaving specificity aside, it doesn't - but it does involve a lot of overhead HTML that you actually don't need. In my humble opinion, these kind of classes bloat your HTML into an unreadable, redundant mess.
To conclude and to summarise: stick to CSS selectors and class names where they make sense semantically. Group elements with classes where it is semantically or structurally an obvious choice. Do not bloat your HTML with classes for every element. Remember the 2005 cliché, less is more.
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 6 years ago.
Improve this question
I have completed html and css and now i want to pass another step.So should I learn responsive design with media queries first or learning Less for CSS then I pass for media queries?
Less is just a smarter way of generating CSS. I think you should learn everything CSS has to offer before jumping to a language that just generates CSS. I will give you two good reasons for that:
You can do anything with CSS that you could do with LESS. You can't do responsive design with Less if you don't know media queries.
Knowing what is happening under the hood will ease the learning of a preprocessor language (Less, Sass, etc) later, as you will have a better understanding of the bigger picture.
I'd say that media queries are easy enough to pick up alongside of a library like SASS/LESS. Responsive design is more about the concept of giving your elements dynamic values than static ones. But, don't let learning one inhibit you from learning the other. If you already have a solid understanding of css, jump in and do both at the same time. It's not like you can't go back and check out what you've written in plain css after it has been compiled.
cheers mate!
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 9 years ago.
Improve this question
In any modern browser (post IE 8), is there any reason to use CSS classes at all anymore, rather than just always use an attribute selector?
I bring this up because I'm working with AngularJS code, which is very attribute-driven, and I've found myself writing styles solely based on attributes rather than using classes, but that's not the norm and I'm wondering if there's a reason why.
Is there a hidden difference between the two that causes people to still use classes instead of attributes?
Syntax: I would argue that <bar foo> and <bar class="foo"> are roughly equivalent: both declared in the markup, both accessible to modify (add/remove) by JS, both have the same name structure. Similarly, [foo]{} and .foo{} are all but equal.
Both classes and attributes have the same specificity, so CSS weights them the same.
I have not been able to find sources citing performance concerns one way or the other.
So why are classes still around, when attributes already exist? Is it just because they were there first and have stuck around?
I would consider selector speed to be a pretty concrete reason.
http://jsperf.com/attribute-vs-class-selectors
You're looking at this from a specific machine readability standpoint, but not from a human readability one.
Let's assume someone is working with a team of developers and designers on a project. Assigning a class to an element tells the human readers of the code that those elements belong to a certain group and that the group they belong to should have, relatively, the same styles. This makes referencing, maintaining and updating CSS style much simpler and faster.
[attributes] on the other hand, are almost like an inversion of a class. The element doesn't belong to the [attribute] like it belongs to a class, the [attribute] belongs to the element.
#Diodeus answer provides very concrete evidence when it comes to benchmarks, which IMO is the most important factor here, but don't forget about semantics either.
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
I have been using BEM on a project at work for keeping my CSS more modular and come across a few situations I feel a need for a bit of clarification on:
Context dependent styles. I keep coming across a need to change a style of a module/component dependent upon a class on a parent item.
Say I am style a product list. I have my .product-list component and inside that all my .product-list__item's. The .product-list__item's then might have an <h3> inside as the product title.
My questions are:
Should the .product-list__item also have a class of .item?
Should the title inside the product have the following classes:
.item__title ?
.product-list__item__title ?
Say the item also had a description box within and that contained the price:
Should the description have:
.item__description ?
.product-list__item__description ?
Should the price have:
.item__description__price ?
.description__price ?
.price ?
I do subcomponents sort of need their own component name added separatley ie: .item or .description. I'm guessing that they need them as where else do they get their styling applied?
Also, If I had the above I would have a .product-list component whcihsounds fine but if sub components have their own component name added as a class such as .item then that is not very descriptive of itself is it?
I know thei may sound complicated but I am serious about being confused here and would love to hear your opinions. I ahve read a ton of articles on BEM and not one explains this sort of thing.
Neil
According to BEM methodology there are no elements of elements so instead of product-list__item__title you should use product-list__item-title.
As for context dependent styles you can use either cascade (and place styles to parent file) or mix as in your examples. Rule is simple: as soon as you find yourself using some item somewhere without its parent block — make it separate block and use mixes but if items are absolutely useless without parent using cascade makes more sense.