2

I was looking around at some examples and noticed that there were two CSS rules with the same selector, doing two different things. Is there a reason they couldn't have been merged?

Example:

.example {
    padding: 0.5em;
    text-align: center;
}

.example {
    background: #ffffff;
}

What's the difference from this?

.example {
    padding: 0.5em;
    text-align: center;
    background: #ffffff;
}
Jordan Renaud
  • 145
  • 9
  • 1
    Because humans aren't machines. We like to logically group things and lay things out in ways that seem illogical to external systems but which make sense inside our pulsating pink oozing blobs of grey-matter which make up ourselves. – Dai Jul 19 '21 at 06:02
  • 2
    ...or more likely, their boss/client was yelling at them at 3am over the phone to quickly change the background to white and so they just added the rule at the bottom of the CSS file because why waste time trying to find the original rule when they want to go back to bed? – Dai Jul 19 '21 at 06:03
  • 1
    If the rules are adjacent, then they could have been merged. If they're not, then intervening rules with the same specificity might prevent their merging. – Alohci Jul 19 '21 at 06:54
  • 1
    Seems too general and not specific enough for a correct answer. So, all answers are correct and incorrect at the same time. However, answering within community guidelines any answer is correct. – Ariel Jul 19 '21 at 10:04
  • 1
    This is a good question, but in its current form is unanswerable with anything other than opinion/conjecture. Is this *all* the code that was used in the example you saw? Or was there much, much more (e.g. for an entire site or webpage)? We would need to see a [mcve] which, for someone asking this question, would probably be too difficult to achieve for the purposes of a Stack Overflow question. – TylerH Jul 19 '21 at 15:33
  • I suggest you visit [What is the meaning of Cascading in CSS](https://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css), and if you still have questions on the subject after reading that Q&A thread, google articles or tutorials about "overwriting previous CSS styles". – TylerH Jul 19 '21 at 15:34

2 Answers2

0

There is no reason at all. It is personal preference to keep them on seperate or keep them together. You can choose to either seperate them or keep them together. No matter which you choose, the end result remains the same.

Ariel
  • 2,471
  • 1
  • 26
  • 43
  • This answer ignores the fact that there may be intervening rules that alter things and there may be a reason to make sure the final setting in .example is the one used. One would need to know the specificity of things before making the statement in this answer. – A Haworth Jul 19 '21 at 07:05
  • 1
    From the look of the code, there isn't any proper reason or comment provided. For all we know, the code could be transpiled, or manually written. It is as you say, there isn't any specific use mentioned. No answer would be wrong here. All answers are correct as long as they are positive and within community guidelines. – Ariel Jul 19 '21 at 08:31
-2

The reason is a mistake.

If the class has been defined earlier, it should contain all properties here. Duplicating a class is not good practice. It seems to be even a mistake.

Kuci
  • 178
  • 1
  • 11
  • "Duplicating a class is not good practice" - I'm going to disagree with you on this. – Dai Jul 19 '21 at 06:20
  • This answer ignores the fact that there may be intervening rules that alter things and there may be a reason to make sure the final setting in .example is the one used. One would need to know the specificity of things before making the statement in this answer. – A Haworth Jul 19 '21 at 07:04