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.
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 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 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 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.
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 8 years ago.
Improve this question
How does the
not(#foo)
selector works to block older browsers and for which browsers does it work in the following tutorial?
http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/
The CSS selector does not block browser, it's just not supported by the browser, i.e. when CSS file is being parsed by browser's built-in parser (which in turn supports certain CSS specification), unknown selectors and rules will be ignored and won't be added into styles of frames in render tree