CSS Nitpicking

I can get pedantic with the best of them.

Ok, I have to confess I have a real nit-pick-turned-ax-to-grind when it comes to how the cascade gets discussed. I get annoyed when, to get performance gains, it is recommended to "in-line" the critical path CSS. That's incorrect, pedantically speaking. Here's how the author written CSS gets connected to the HTML:

  1. Linked CSS. Using <link rel="stylesheet"> is lovely and wonderful, but it is the weakest in the line of succession. Styles written with the following methods will override declarations contained in the external, linked CSS file.
  2. Embedded CSS. Use of a <style> tag in an HTML file will take precedence over declarations in a linked file, if there are collisions in the way CSS has been architected. This is the what should be used if you aim improve performance with critical path CSS inclusion.
  3. Inline CSS. Use of style="" on a specific element in the DOM trumps the 2 previous forms of CSS if a rendering engine encounters overlapping style declarations. Do not write your CSS here to get performance gains. It's too hard to maintain this way.
  4. !important. Use of !important will basically break any ties, but it makes the code more brittle and is highly discouraged. Use with extreme caution.

Benjamin Johnson provides a more extensive explanation of the cascade outlining additional topics to factor in that I didn't mention above.

Kids, remember that you are not "inlining" your CSS for performance gains. You are "embedding" your CSS. Embeeeedding.