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 3 years ago.
Improve this question
What's the benefit of overriding Bootstrap SCSS variables vs just overriding Bootstrap's CSS class rules?
For example,
Overriding variables:
$custom-font-size: $input-font-size;
Overriding class:
.someClass {
font-size: $input-font-size;
}
For one, duplication of output. If you override classes then that will mean that in your CSS you'll be including both the Bootstrap definition and the overriding definition. Not ideal, so on a smaller scale this works fine.
But on the bigger scale though, overriding potentially hundreds of classes (if not more) will be both a waste of resources for any end users (since there will be more data to download) but also a waste of time because you have to go and find every single instance where you want to override the use of that variable. Changing just the variable once will change every instance of where that variable is used, and you don't get the extra output. A win-win.
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 7 months ago.
Improve this question
I've an angular app which uses SASS.I want to style a certain class of buttons in specific way. This class of button is used throughout my app in certain components. I want to know which would be better way to write the common style for them. I know using #import and #extend will copy my common styles into each component's scss right after compilation? So will it affect the size of my application as well it's performance?
Another idea I have is to go for global stylesheet, styles.scss.
I want to know which would be better in terms of maintenance and performance.
indeed, #import and #include will copy the code into your component style, so your bundle size will grow.
Using #extend only copy the CSS selector of your class (instead of its content), so your bundle will also grow, but less than using #include. A downside of #extend is you can't use a #media queries with an #extend.
The lightest solution is using styles.scss, which can obviously be splitted into multiple files, which would be imported into your styles.scss. That is how I personnaly use a Design System in all my angular apps.
I only import variables and mixins in my components. All global stuff is handled in styles.scss
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 5 years ago.
Improve this question
For a responsive website is there a best practice to hide/show elements altogether in a media selector? E.g. is it better to have a class called .hide_on_desktop (which sets display: none;) and then to add that class to several elements in the website using HTML.
Or to do the following:
.element1, .element2, #element3{
display: none;
}
In the above case element1, element2 and element3 are selectors (classes and ids) that already exist.
Which approach is best for a big website?
I would suggest creating a hidden class if you plan to hide several objects. Bootstrap handles this by having classes: .hidden-xs, .hidden-sm, .hidden-md,etc.. in order to hide elements based on device width.
http://getbootstrap.com/css/#responsive-utilities
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 9 years ago.
Improve this question
maybe a silly question but as far as I like standards I'd like to know, how should we write CSS selectors:
.my-selector-for-div (breaks)
.mySelectorForDiv (camel case)
Is there a standard which of those ( or any other ) should be used ?
Here is a website of css name convention (with examples):
http://www.realdealmarketing.net/docs/css-coding-style.php
There are some interesting articles about code formating (about CSS and BEM methodology):
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
I'd go with matching the language. In CSS' case it uses hyphenation regularly so for selectors I would also use hyphens even though I personally find them ugly.
Not sure if there's a proper style guide for them though.
edit: Can I use camel-case in CSS class names seems to also say use hyphens for class names.