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
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 10 months ago.
Improve this question
Hello guys I have this CSS selector and I can't figure out how to read it. Can someone explain? Thanks
.form__input:not(:placeholder-shown).form__input:not(:focus)+.form__label {
The ideal is that in nested css classes you put them one below the other for easy reading, since it can contain many elements and about your question
.form__input:not(:placeholder-shown)
// apply the class to all .form__input that do not have the selector "placeholder-shown".
.form__input:not(:focus) // applies the css to all .form__input not in "focus".
+.form__label // here applies the css to the input label
{
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.
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
I was going through the main boostrap.css file and came across several uses of this selector:
.btn-group-vertical > .btn:first-child:not(:last-child) {}
So it's selecting an element that has the .btn class which is a first child (but also not a last child?) of an element with the class .btn-group-vertical
Why would there be a need for the chained :not() selector? I can't imagine a use case for this.
The use case would be if it's a single element in the group, wherein it's both the first and last child.
I opened an issue on Github and got a response from the creator himself (Mark Otto):
:first-child and :last-child can apply to the same element if it's the
only child element. We do this to avoid overriding properties again
and again. If we did :only-child we'd have to write another selector
altogether.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How could i remove all unused css elements from my page.i have used many tools but all are telling me the percentage of unused css but no one is telling me which css element to remove..
i just want to know my unused css elements.
Checkout the Firefox extension:
Dust-Me at https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/.
"Dust-Me Selectors is development tool that scans your website to find unused CSS selectors."
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.