Web Development Philosophy

Design and Dev need to stop fighting with each other. Consistent design = clean code = fast site. CSS doesn’t suck, you’re just doing it wrong. Something beautiful can become a mess if you have multiple people working on the same code. The learning curve for CSS is incredibly steep. Every domain must accommodate beginner, intermediate and advanced.

CSS code reuse is almost non-existent. File size just keeps growing. As the site evolves, we continually modify the CSS.

Understanding The Cascade

Browsers have internal default styles. They are all different. Use reset.css is a good way to get around this. Browsers ignore bits they don’t understand. The order of multiple classes applied to one element varies. Order of the property value pairs. Last declaration will always win. Order of the rulesets. Order of stylesheets when called, the last one will prevail. ID’s win over classes. Inline styles win over stylesheets. !Important overrides something inline, which makes it really hard to figure out what will win in different cases. In CSS, avoid ID’s, inline and !important. IDs are fantastic as JavaScript hooks…but as a method for styling, it completely sucks. Allow cascade order to determine the winner. Avoid the aggregation of rules, browsers will interpret differently.

What Is Object Oriented CSS?

We tend to focus all of our efforts in between the brackets. We need to begin to focus on our selectors. Terminology can be confusing. Reusing elements makes them. Components are like legos. Mix and match to create diverse and interesting pages. Avoid duplication, wasting resources on components that can’t add value.  Avoid location-dependent styles. How can you avoid writing more CSS? There was an old lady who swallowed a fly applies directly to this situation. Define your headings, H1 through H6 and also define each as a class. The tag name can represent the code semantics while allowing visual flexibility. If you need more headings, you want to avoid making them location-dependent.

Applying Programming Best Practices to CSS

Main problems, avoid duplication, unpredictability and CSS kadzoo. Use hacks sparingly, you should feel a little bit sick to your stomach when using hacks. Don’t let hacks change your specificity. Use underscore and *. If you are hacking anything other than Internet Explorer, you’re doing it wrong.

Avoid styling ID’s. ID’s impact specificity and can’t be reused. Avoid styling elements (ul’s, etc), unless setting defaults. Avoid !important, except of leaf nodes. Style classes rather than elements. Instead of div.error, use .error. If you build the legos correctly, others can build anything they want with it. Combine elements with classes for specific cases.

Give rules the same strength, use cascade order to overwrite previous rules. Make your CSS predictable. It’s really hard to say write good CSS. People don’t always have the time to think about these things up front.

Layer Selectors. Duplication is worse than stale rules. Check for code bloat by grep’ing for specific things in all of your stylesheets. CSS objects are much more granular than JavaScript or other programming-oriented items. Extend classes to avoid repeating code.  Avoid specifying location, apply classes to the object you wish to change. Avoid overly specific classes, they’re all semantic, but limiting.

Maybe CSS isn’t Perfect

CSS Wish List

• Make CSS a better declarative language.
• It should be easier to author.
• Reduce the amount of code.
• Make the language more robust.
• Add variables.