My Rant on Writing CSS for large scale applications

A note on descendent selectors:
You should not totally avoid them. It would be a little bit impractical if you didn't use them. BUT, there is a big. This post explains it. As a rule of thumb, don't do things like .card li, or .card p. This is mainly because of css specificity. When you use the descendent selector it becomes very specific and will override pretty much everything else. And then you will end up fighting css trying to work against it to make the selector more specific. This is usually an issue when you use descendent selector in the middle or high on the dom. It is actually useful for self contained small modules. You can then combine those small modules to create bigger ones. And don't get confused by what people say about the performance of the descendent selector. It's not that bad. Just google it there is some good discussion about it. You can use the child selector if you wanna do better. i.e. .card > li When you do this, it will only affect the li's that are the immediate children of 'card', not any level deeper.

BUT JUST NEVER USE ID'S FOR SELECTORS. Use them for JS/jQuery hooks. And if you happen to use classes for JS hooks, name them with the js prefix. Like js-backtotop. ID's have a very high specificity and will drown you in the specificity war. Just don't use them for CSS selectors, you just won't need them. They are more evil than good.

Learn CSS specificity and inheritance and try to work with it rather against it. So when you see a property is crossed out in the inspector, don't try to overload the selector to make it work. Understand why div.card would override .card. Because its specificity score is 11 which is higher than the other one which is 10. Play around with different selectors on the page that I sent you.

Also, rather try keeping the selectors simple and less qualified. For example:

<div class="card-inverted"> is better than <div class="card card-inverted">

Here you can also take advantage of SASS extend to do it. Find the commonalities between card and inverted card and make inverted card extend card.

.card {
  font-size: 20px;
  box-shadow: 1px 1px 3px #000;
}

.card-primary,
.card-secondary {
  @extend .card;
}

.card-primary {
  border: 1px solid #000;
  color: black;
}

.card-secondary {
  border: 1px solid #fff;
  color: white;
}

Also sometimes don't be scared of doing this:

<ul class="card">
  <li class="card-item">
  </li>
  <li class="card-item">
  </li>
  <li class="card-item">
  </li>
</ul>

Check out this talk, he has very very good points. He will also talk about other things that are very useful. I think his approach is the most practical to the other guys who live by OOCSS and stuff like that. Being practical and modular is the most important thing in CSS while keeping the class as semantic as possible. There is always a trade off and you can never write the prefect css for a web application. You should become critical about how YOU do it and WHY you do it that way. YOU should have a good reason for yourself and the application. All the ideas and ideologies out there like Atomic css, OOCSS etc etc might not apply to your case. But listen to this guy, I found him very reasonable and practical. I follow him when I write my css. Also check out this post that talks about css architecture. Kind of repeating similar points, but not a bad read.

Also check this out about media queries. He makes great points about how to deal with media queries. Also, look up element query as well. Andy hume talks about his element selector which is descent. If you wanna try element queries try this one. I found it to be more versatile.

On the topic of practical and pragmatic, check this post out too. There are some flaws in his arguments but it is a great read that helps you get out of the idea that if you separate CSS in its own file you have decoupled your application. Decoupling means that your CSS is not dependent on the DOM. The best CSS for large scale projects like Flitti is the ones that least know about the markup and how html is written.

I struggled a lot in the past two years and I am still struggling balancing. In my opinion css is all about trade offs and the type of application that you are working on. One rule that someone says might apply to their project but might be terrible for yours. But Andy Hume's Css for grown ups is very well balanced and lays the foundation and the common ground.

But above all, this post summarizes pretty much everything. Very thorough description of the things you will encounter when writing large scale applications.