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.
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 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.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I have a difficulty in remembering the names of properties in CSS. I don't know if I'm the only one or is it normal? My question is: is it OK if I use a cheat sheet? and do most desiners use something like that?
If so, please give me a link to a good reference (cheat sheet) for CSS properties.
Downloadable PDF cheatsheet: http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
Preview here (archived)
as #Petar Suggested, you should use a normal IDE which will guide you.
On the other hand, in time you will be able to remember what you need, practice, practice, practice.
if you need a "Cheat sheet" this should be a good one:
http://www.w3schools.com/css/
It's always okay to use a reference. The more you write CSS the less you will need one. For example if you can't remember attributes like width, height, margin, padding. You definitely need to practice more.
For more complicated stuff like css3 gradients and transitions, I use this resource here.
http://css3generator.com/
Let me know if you need something else.
I personally Use Aptana studio. It detects errors and auto completes property names etc. However http://www.w3schools.com/css/ is a good refference and over time you will just remember them for the most part.
You can try this,
elizabethcastro
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