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'm working on a CSS file with more than 3000 lines.
In this CSS file there are around 40 elements, which have the property display:inline;
Now my question is; wouldn't be better to create a class like:
.displayInline {
display: inline;
}
and use it inside the mark-up whenever an element needs to have display: inline; rather than writing the display: inline; 40 times for 40 different elements in the CSS file?
Thanks for your help
It is definitely worse. Indeed what are you talking about is the bad practice, that become somewhat popular with so-called CSS frameworks. Representational information (CSS rules) should not appear in structural part (markup) of code. This is an MVC interruption. By the way, MVC pattern isn't the silver bullet, but in this case there is no reason to ignore it.
Here is a good article on that topic: http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html
So, answering your question, it may be fine to try out some CSS preprocessors that support mixins. Native CSS doesn't fit well inner hierarchical tasks. Less or Stylus are quite cool.
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
For example, you can create a scrolling function in CSS using
.overflow{
display: flex;
flex-direction: row;
overflow-x: scroll;
background: green;
}
Why would someone use a component such as react-scrollbar
https://www.npmjs.com/package/react-scrollbar
I presume that you have more options styling it when using JSX?
Browser-generated UI components (such as scrollbars, resize-handles and some UI components in HTML forms) can appear "a bit clunky" and are known for being difficult to style consistently across all browsers, platforms and devices.
This has always been the case historically and the situation persists at present.
The intention behind using javascript (or a JS library or framework) to reproduce native browser-generated UI is to enable the production of a UI component look and feel which:
is highly customised to the website / web-app; and
remains consistent across all platforms.
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 6 years ago.
Improve this question
I have a question to web designers - do you think that it's fine to make CSS classes with one rule in them?
For example, I usually write classes like .float-right, .center or margin-top-40 to apply them to divs or some other elements. But I must say that I'm not writing all CSS this way, just applying these classes in some places when it's necessary to remain flexibility, like when I have to move one link to the right or something like that.
Do you think that it's the correct way of using CSS?
My suggestion is to create a base file which will include a lot of classes with one rule.
And in a different css file, you will use Sass with #extend to build your component css classes.
For example:
.foo {
color: red;
}
.bar {
#extend .foo;
}
For the examples you have mentioned, it is not necessary to write additional class for the particular style. You can write them where necessary.
Adding additional style rule adds extra class in the html markup.
You can use #mixin in SCSS which will be more efficient.
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