0

There are several tips about writing better CSS on the Internet, like sorting properties alphabetical for example, but no one has mentioned about pseudo classes' best practice, e.g.

nav ul {
  /*main styles*/
}
nav ul:hover li.selected {
  background-color: transparent;
}
nav ul li {
  /*main styles*/
}
nav ul li:hover {
  background: #ffaacc;
}

You may think that It's not necessary at all (well It actually Isn't In the above code) , but I found It important to have a certain way for that and It will be important when you have a CSS file with more than 1000 lines and considering all major CSS pseudo classes (such as :link :hover :active :focus :blur :visited etc)

Where should I put pseudo classes?

Should I put them in a separate place (end of file or even another specific file)?

Should I just put them right bellow their default selector ?

bobD
  • 1,037
  • 2
  • 9
  • 17
  • There are always opinions about what is "best practice". When it comes to links, though, they should be [placed in LVHA order](https://developer.mozilla.org/en/docs/Web/CSS/:link) (link, visited, hover, active). This ensures that each state is overridden correctly. – misterManSam Jun 28 '16 at 03:34
  • There aren't "major" or minor CSS pseudo-classes. The ones you refer to are dynamic pseudo-classes. That's probably what you meant. There are many different kinds, and you'd have to think about the ordering for all of them as well. The good news is that, aside from specificity and the [LVHA ordering](http://stackoverflow.com/questions/7371732/why-does-foo-alink-foo-avisited-selector-override-ahover-aactive-s), it's all down to personal preference. – BoltClock Jun 28 '16 at 03:42

2 Answers2

0

They should go below its default selector, so that it can be found easily for someone who is editing it in the future.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Nick_O
  • 429
  • 5
  • 18
0

Include them directly after the elements default selector as required. I typically order pseudo classes from a user interaction perspective, someone hovers over the link before they make it active so order it that way etc.

For example a link css:

  • Element CSS
  • :link
  • :visited (moved forward so :hover and :active can override it)
  • :hover
  • :active
Aaron Vanston
  • 755
  • 7
  • 19
  • Yep, this is what I do also. And for default selectors I try to go "largest"/"most commonly used" to least. So H1, H2, etc, then P, span, etc. Until I get to the 'common classes' like .center to make text-align:center, then lastly the custom id/classes, for anything custom I make like "#loginForm" – Xander Luciano Jun 28 '16 at 03:50