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 thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.
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 months ago.
Improve this question
New here. I am currently building a personal website with HTML & CSS (following MDN course).
CSS styling can make sheets quite lengthy.
Is it a good practice to style "reusable components" (using classes) and then using "id" to slightly alter such components?
Below code example + visual.
Thanks for the help!
.block { /* use of class for the block component */
background-color: var(--darkest-green);
border: 1px solid black;
margin: 10px 0px;
}
#block_webpages { /* use of ID to adjust needed properties */
background-color: var(--darkest-green);
}
#block_articles { /* use of ID to adjust needed properties */
background-color: var(--light-green)
}
#block_about { /* use of ID to adjust needed properties */
background-color: var(--green);
}
<div class = "block" id = "block_webpages">Introduction of the different web pages</div>
<div class = "block" id = "block_articles">About the website's author</div>
<div class = "block" id = "block_about">Shows the latest published article</div>
rendering on the webpage - very basic element for demo purposes
id's are more powerful selectors than class. It is advisable to use class not id for better programming or coder. (there are many other reasons also)
You can do the same thing with the class itself without giving id.
Good that you are using CSS variable naming property👍🏼
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 2 years ago.
Improve this question
there is a problem that I have had since I started using CSS everything selector [*] with multiple [:not()].
Examples below does not work as I tried:
.post-body *:not(.has-color):not(.has-bg){
color: red
}
.post-body *:not(.has-color)*:not(.has-bg){
color: red
}
.post-body *:not(.has-color .has-bg){
color: red
}
.post-body *:not(.has-color , .has-bg){
color: red
}
Imagine something like WordPress post content; I can not change the content whole structure but I do need to set a primary color for texts which do not have a specific background or text color. So I am trying to set Red Color to any element except elements that contain ".has-color" or ".has-bg" that is it there is no relation between them.
Has somebody solved this issue or even seemed to something like this?
Your first example should work, as shown in this CodePen, but as Louys notes, it’s hard to tell without any markup.
.post-body *:not(.has-color):not(.has-bg) {
color: red;
}
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
In the following article I read that one should try reduce the number of selecetors.
Article: use less selectors
I'm wondering if writing LESS and I'm using a lot of nesting to group parent and child elements, will that generate bad CSS code in the end?
LESS
.wrap{
width: 100%;
height: 20%;
background: green;
header{
background: blue;
h1{
color: red;
}
}
}
I'm using a lot of nesting to group parent and child elements, will that generate bad CSS code in the end?
In a word, yes. In the long run this will give you highly specific, unmaintainable CSS. Let 's have a look at what your example will produce for the h1 style.
.wrap header h1{ color: red; }
So what you've ended up with here is a very specific CSS selector, that isn't really necessary. You could, for instance, just have
h1 { color: red; }
or use a class on the h1
.title { color: red; }
Why is specificity bad?
So imagine, 6 months later another developer comes along and they need to change the color of a h1, but just one of them.
First they try to add a class to the h1
.new-color { color: blue; }
But the colour doesn't change because the original CSS is so specific. So they have to do this
.wrap header h1.new-color { color: blue }
or worse still they may do this
.new-color { color: blue!important; }
And then what happens when other changes need to be made? As you can see very quickly and very easily you can end up with unmaintainable CSS, that will have everyone pulling their hair out.
Performance
People usually negate performance when it comes to CSS, but it is always good to know what is going on when a page is rendered. CSS is read from right to left. Using your example
.wrap header h1 { color: red; }
This means the browser engine will search for every h1 and check if they have a parent header and then if that has a parent class wrap. If so it will apply the style. A low specificity makes the rendering process a lot simpler.
Summary
So to sum it up, nesting, whilst it may seem great keeping your code nice and readable, should only be used when absolutely necessary. It's very easy to forget what the CSS that is actually being produced looks like. Before you know it you'll be in nesting hell.
Languages like LESS or SASS give you more flexibility in declaring your style rules, and that can be good or bad depending on how you use it. The more flexibility you have in a language, the more you need design patterns and good practices to avoid making things worse than they were before.
LESS doesn't require that you always nest. You can always use CSS of course, and if you are applying a style to all p it might be better to define it globally, than to call mixins to obtain the same result on several nested ps.
But LESS and SASS do allow you avoid duplication, to write code that is clearer and easier to maintain, and other problems caused by the code duplication required by CSS.
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
Two different paragraph can be given two different type of colours using the below css code.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
Now, In the html code i can Specify
<p class="paraStyle1">Hello</p>
<p class="paraStyle2">Hello There</p>
The above CSS code can be modified to as Shown below, So which one should be used, considering best coding Technique(Design).
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
Classes can be duplicated which means a p tag and a div tag can have same class.
But if you want to style only the p tag then you should follow the second style. If you are not using your class anywhere else except for the p tag you can use the first style.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
will not be limited to p tags....it can be allocated to any tag having the class paraStyle1 or paraStyle2, it can be a,p or even a div... see demo here
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
is specifically for the p tags having classes paraStyle1 or paraStyle2....no other html tag can avail the style of these classes except p tags.... see demo here !!
The second syntax (p.paraStyle1) applies the contained css only to p tags with the paraStyle1 class. You should use this syntax if you are planning on reusing that class name with different styling for different tags.
When you specify your CSS selector to be p.<class>, it means that you only want the p tags with that class to be styled. However, if you need this same style to be applied to other tags as well (eg a <div> tag), then use the first method.
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
Is this CSS code valid? If not, how will it affect the rest of the page?
<style type="text/css">
.detpage .fieldarea-row { position: static;!important;}
</style>
You have 1 semicolon too much. But shouldn't impact the rest.
<style type="text/css">
.detpage .fieldarea-row { position: static !important;}
</style>
No, it's not valid. your !important is just dangling there because youv'e "closed" the declaration early:
.detpage .fieldarea-row {
position: static !important;
^---- no ;
}
as for what it'll do. no way to tell. css just gives some rules to change layout/looks when things match, but you've provided nothing to show what this rule would apply to.
I would go like this
.detpage .fieldarea-row { position: static !important; }
and put the style in a separate CSS file, to avoid mixing CSS with HTML codes.
http://jigsaw.w3.org/css-validator/validator says that it's invalid, and that therefore the entire statement is invalid/ignored.
I'm not sure whether it's true though that the whole statement will be ignored (because that contradicts my understanding of CSS error recovery specification).