Beginner’s Guide to Elegant CSS
A fundamental goal of web design is to separate content (the “what”) from the design (the “how”). From a user perspective, we want a consistent experience across different devices. And from a provider perspective, we want to be able to re-brand with a new design without having to rework thousands of pages of legacy content.
The current proliferation of CSS frameworks violates that principle by requiring the extensive use of framework-specific CSS classes, which get embedded in the HTML content.
HTML5 provides a big step towards fulfilling the what/how separation with new tags which convey the semantic/structural purpose for a chunk of content (article, header, footer, aside, main, mark, nav, details, summary) rather than its design.
The purpose of this piece is to propose a simple set of rules for using HTML5 and CSS more intelligently to achieve better what/how separation.
Rule 1: Make good use of the HTML5 tags. As an author, you have a communication intention for your content, so use the tag that matches your intention. Here is good guide.
Rule 2: Style tags and don’t use class or id unless absolutely necessary — and I doubt it is ever really necessary. This promotes a consistent design. Do you really need more than one way to style an <h1> or a <p>? If so it is probably because it is inside something else like a <section> or a <footer> and you can assign it in CSS to <footer> > <h1> versus <main> > <h1>. I wonder what would have happened if HTML5 and CSS3 simply eliminated DIV, CLASS and ID? (Well, javascript would be harder to use — see next!)
Rule 3: Perform “normal” user interaction (UI) and transitions with CSS instead of javascript. This is sometimes tricky, but someone has probably solved it before and you can adapt their examples. I’ll put my favorites in an article on Saturday. Hopefully you’ll contribute your own in comments and I can credit you!
Rule 4: Avoid using javascript unless absolutely necessary. If you’re writing a game or generating a dynamic chart or formatting an incoming table of ajax-fetched json data, then go for it — and see if you can do it with vanilla javascript instead of packages that slow down your load.
Rule 5: Pick a few meaningful colors and define them with CSS variables so if you decide your highlight color should be purple instead of black, you only have to change it once.
Rule 6: Write your CSS file in a logical hierarchy, with a few settings up front that define the overall design of the page. (I’m hoping you only ever need one! Please name it style.css!) Here is a good example of the first few lines.
/* the basics */
:root { --primary:darkgreen; --light:mediumseagreen;}
*,*::before,*::after {box-sizing: border-box;}
body { margin: 0; padding: 0;
font-size: 17px;
font-family: sans-serif;}
main, section, footer, aside {padding: 1em;}
main > h1 {font-weight:normal; font-size:2.4em;}
/* a bit fancier for icons in your title line */
main > h1 > span {color:var(--light); text-decoration:none;}
/* Style striped tables */
table, td {border:1px solid var(--primary);
border-collapse:collapse;}
tr:nth-child(even) {background-color: #light;}
td, th {overflow:visibe; padding: 0.5em 1em;}
th {background-color:var(--primary); color:white;}Rule 8: Use a tool like Lighthouse to ensure you’re following best practices.
I doubt I can overcome the rather snarly debate going on. I do believe we can all contribute to the evolution of the web through both better practice and better standards.
