Fake conditionals with CSS

The CSS language has always lacked conditional type markup. Some modern dynamic systems like Less have improved upon cascading style sheets but the core language itself lacks dynamic abilities.

I want to share this trick I just used on http://communityfunded.com

The issue was that I needed to adjust a top margin in certain cases, from the front end. Body class to the rescue. The site has a body class for logged in users and a body class if their are items in the cart. Problem solved by chaining css classes in a rule.

#cf{margin-top:104px}
body.logged-in.items-in-cart #cf{margin-top:104px}
body.logged-in #cf{margin-top:68px}

Basically this sets the top margin to 104px. If you are logged in and have items in your cart the margin stays the same. If you are logged in with no items in your cart, the margin is 68px.

As you can see this is a poor mans way of faking in conditional statements into a language that does not support conditionals.