In Defense of Descendant Selectors and ID Elements
Except when I occasionally update Designing With Web Standards, I quit writing hands-on, nuts-and-bolts stuff about CSS and HTML years ago. Publishing abhors a vacuum: other designers and developers took my place. For the most part, this has been a good thing—for them and for our industry. The best writers about code have always been those who spend 25 hours of every day up their necks in it, as I used to. While folks like me migrate into strategic or supervisory roles (providing us with new places to innovate and new things to write about), a new generation of code crafters is making new discoveries and sharing new teachings. Ah, the magical circle of life.
But amid the oodles of resulting goodness, I find occasional stinkers. Take the notion, now concretizing into dogma, that
id should almost never be used because it has “too much specificity,” and that
class names are always preferable. Respectfully, I call bunk.
To my knowledge, this notion comes out of Nicole Sullivan’s brilliant Object Oriented CSS, an approach for writing HTML and CSS that is designed to scale on sites containing thousands of pages, created by dozens of front-end developers over a period of years, generally with no rules or style guide in place (at least no rules or style guide until it is too late). On sites like these—sites like Amazon or Facebook that are hosed from the get-go thanks to too many cooks and no master chef—the use of structural
id and descendant selectors can be problematic, especially when inept coders try to overwrite an
id-based descendant selector rule by creating ever-more-specific descendant selector rules.
In this particular (and rare) circumstance, where dueling developers have added rule after rule to a huge, shapeless style sheet that is more of an archeological artifact than a reasonable example of modern code, Nicole’s admonition to avoid descendant selectors based on
id is probably wise. If you have the misfortune to work on a huge, poorly developed site where you will never have permission to refactor the templates and CSS according to common sense and best practices, you may have to rely on class names and avoid descendant selectors and
But under almost any other circumstance, properly used
ids with descendant selectors are preferable because more semantic and lighter in bandwidth.
The way I have always advocated using
id, it was simply a predecessor to the new elements in HTML5. In 2000, we wrote
div id="footer" because we had no footer element, and we wanted to give structural meaning to content that appeared within that div. Today, depending on the browsers and devices people use to access our site, we may well have the option to use the HTML5
footer element instead. But if we can’t use the HTML5 element, there is nothing wrong with using the
As for descendant selectors, in a site not designed by 100 monkeys, it is safe to assume that elements within an
id’d div or HTML5 element will be visually styled in ways that are compatible, and that those same elements may be styled differently within a differently
id’d div or HTML5 element. For instance, paragraphs or list items within a
footer may be styled differently than paragraphs or list items within an
aside. Paragraphs within a
footer will be styled similarly to one another; the same goes for paragraphs within an
aside. This is what
id (or HTML5 element) and descendant selectors were made for. Giving every paragraph element in the sidebar a classname is not only a needless waste of bandwidth, it’s also bad form.
Say it with me: There is nothing wrong with
id when it is used appropriately (semantically, structurally, sparingly). There is plenty wrong with the notion that
class is always preferable to descendant selectors and semantic, structural
Please understand: I’m not disparaging my friend Nicole Sullivan’s Object Oriented CSS as an approach to otherwise unmanageable websites. No more would I disparage a steam shovel for cleaning up a disaster site. I just wouldn’t use it to clean my room.
I’ll be discussing code and all kinds of other things webbish with Chris Coyier and Dave Rupert on the Shoptalk podcast today. Meanwhile, let me know what you think. And don’t forget November 30th is the sixth international celebration of Blue Beanie Day in support of web standards. Wherever you may stand on the great
id debate, please stand with me and thousands of others this November 30th.
Build Books With CSS3; Design a Responsive Résumé
“WE ARE ALL PUBLISHERS,” claims Issue No. 353 of A List Apart for people who make websites. Design books with CSS3; craft a responsive web résumé.
by NELLIE MCKESSON
While historically, it’s been difficult at best to create print-quality PDF books from markup alone, CSS3 now brings us the Paged Media Module, which targets print book formatting. “Paged” media exists as finite pages, like books and magazines, rather than as long scrolling stretches of text, like most websites. With a single CSS stylesheet, publishers can take XHTML source content and turn it into a laid-out, print-ready PDF. You can take your XHTML source, bypass desktop page layout software like Adobe InDesign, and package it as an ePub file. It’s a lightweight and adaptable workflow, which gets you beautiful books faster. Nellie McKesson, eBook Operations Manager at O’Reilly Media, explains how to build books with CSS3.
by ANDREW HOFFMAN
Grizzled job hunting veterans know too well that a sharp résumé and near-flawless interview may still leave you short of your dream job. Competition is fierce and never wanes. Finding new ways to distinguish yourself in today’s unforgiving economy is vital to a designer/developer’s survival. Happily, web standards whiz and mobile web developer Andrew Hoffman has come up with a dandy differentiator that is just perfect for A List Apart readers. Learn how to author a clean résumé in HTML5/CSS3 that scales well to different viewport sizes, is easy to update and maintain, and will never grow obsolete.
Illustration by Kevin Cornell for A List Apart.
Designing Apps With Web Standards (HTML is the API)
The Web OS is Already Here… Luke Wroblewski, November 8, 2011
Mobile First Responsive Web Design, Brad Frost, June, 2011
320 and up – prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Andy Clarke and Keith Clark.
Gridless, HTML5/CSS3 boilerplate for mobile-first, responsive designs “with beautiful typography”
HTML5 Boilerplate – 3.02, Feb. 19, 2012, Paul Irish ,Divya Manian, Shichuan, Matthias Bynens, Nicholas Gallagher
HTML5 Reset v 2, Tim Murtaugh, Mike Pick, 2011
CSS Reset, Eric Meyer, v 2.0b1, January 2011
Less Framework 4 – an adaptive CSS grid system, Joni Korpi (@lessframework)
Responsive Web Design by Ethan Marcotte, 2011
Adaptive Web Design by Aaron Gustafson, 2011
Getting Started With Sass by David Demaree, 2011, A List Apart
Dive into Responsive Prototyping with Foundation by Jonathan Smiley, A List Apart, 2012
Future-Ready Content Sara Wachter-Boettcher, February 28, 2012, A List Apart
For a Future Friendly Web Brad Frost, March 13, 2012, A List Apart
Orbital Content Cameron Koczon, April 19, 2011, A List Apart
Web standards win, Windows whimpers in 2012, Neil McAllister, InfoWorld, December 29, 2011
Thoughts on Flash – Steve Jobs, April, 2010
Did We Just Win the Web Standards Battle? ppk, July 2006
The Web Standards Project: FAQ (updated), February 27, 2002
To Hell With Bad Browsers, A List Apart, 2001
Web, Mobile, Responsive, Content | Notes from An Event Apart Seattle Day 1
IF YOU couldn’t be among us for An Event Apart Seattle 2012 Day 1 on Monday, 2 April 2012, these notes by the illustrious Luke Wroblewski will almost make you feel you were there:
Content First – Jeffrey Zeldman
In his opening keynote at An Event Apart in Seattle, WA 2012 Jeffrey Zeldman talked about the need to keep content front and center in websites and the web design process.
Big Type Little Type – Jon Tan
In his Big Type, Little Type talk at An Event Apart in Seattle, WA 2012 Jon Tan talked about important considerations for font setting and selection on the web.
Silo-Busting with Scenarios – Kim Goodwin
In her Silo-Busting with Scenarios talk at An Event Apart in Seattle, WA 2012 Kim Goodwin described the value of using scenarios as a design tool and walked through an example of how to do so.
Five Dangerous Ideas = Scott Berkun
In his Five Dangerous Ideas talk at An Event Apart in Seattle, WA 2012 Scott Berkun outlined truths about how the world works that creatives don’t like to talk about.
Adaptive Web Content – Karen McGrane
In her presentation at An Event Apart in Seattle WA 2012 Karen McGrane discussed the need for structured content on the web.
Rolling Up Our Responsive Sleeves – Ethan Marcotte
In his Rolling Up Our Responsive Sleeves talk at An Event Apart in Seattle, WA 2012 Ethan Marcotte walked through ways to tackle thorny issues in responsive design layouts, media, advertising, and more.
Watch http://www.lukew.com/ff?tag=aeaseattle2012 for notes on Day II, beginning momentarily.
AEA swag thermos (part of the complete 2012 swag set) illustrated by the magnificent Kevin Cornell for An Event Apart.
The Big Web Show #64: Jenn Lukas – You Code, Girl!
IN EPISODE No. 64 of The Big Web Show, I interview front-end developer Jenn Lukas about how to tell if you’re a designer or coder; in-house versus product development versus consulting; Girl Develop It, a code teaching activity for budding women web developers; the designer/developer collaboration; tabs or spaces; jumping on the SASS bandwagon; staying sane during #siteweek; maintaining an active roster of side projects; the importance of writing; and loads more.
Jenn is Interactive Development Director for Happy Cog. She was named one of Mashable’s 15 Developer/Hacker Women to Follow on Twitter, and you can find her on Twitter posting development and cat related news. She also writes for The Nerdary and is a monthly columnist for .net Magazine. You can see Jenn speak at a variety of conferences, including SXSW, JSConf (both US and Germany), and Standards.Next. She also supports promoting women in technology by teaching HTML and CSS classes for GirlDevelopIt.
Listen to this week’s episode at 5by5.tv.
Links in This Week’s Episode
- .net magazine
- The Pastry Box Project
- Redesign Week
- “There’s Nothing Cheesy About Being a Superfan”
- Cheese Wheel!
Articles by Jenn Lukas
- Transitioning Max Height
- December 15 2011, The Nerdary
- The Gift of Giving
- December 15 2011, Cognition
- I have a new crush and its name is figcaption
- August 11 2011, Cognition
- Are Doctypes the New Lunch Tables?
- April 14 2011, Cognition
- Happy-Libs: We’re All In It Together
- April 14 2011, Cognition
- June 24 2010, The Nerdary
Subscribe to The Big Web Show
The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. Get episodes delivered to you automatically:
Getting Started with Sass – A List Apart
CSS’ simplicity has always been one of its most welcome features. But as our sites and apps get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity—so welcome as we first started to move away from font tags and table-based layouts—has become a liability.
Fortunately, a few years ago developers Hampton Catlin and Nathan Weizenbaum created a new style sheet syntax with features to help make our increasingly complex CSS easier to write and manage—and then used a preprocessor to translate the new smart syntax into the old, dumb CSS that browsers understand.
Learn how Sass (“syntactically awesome style sheets”) can help simplify the creation, updating, and maintenance of powerful sites and apps.
Illustration: Kevin Cornell
Meet the 10K Apart Winners
Responsive apps under 10K
Last year’s 10K Apart challenged readers to create the best application they could using no more than 10K of images, scripts, and markup. We wanted to see what you could do with HTML5, CSS3, and web fonts, and you blew us away.
For this year’s contest, we asked you to step up your game by not only awing us with brilliant (and brilliantly designed) apps built using less than 10K of web standards and imagery, but we also insisted you make those awesome apps fully responsive.
(If you found this page by accident, responsive design accommodates today’s dizzying array of notebooks, tablets, smartphones, laptops, and big-screen desktops—and anticipates tomorrow’s—via fluid design experiences that squash and stretch and swell and shrink and always look like ladies. Ethan Marcotte pioneered this design approach, which takes standards-based progressive enhancement to the next level, and which achieves its magic via fluid grids, flexible images, and media queries. But I digress.)
We worried. Oh, how we worried.
We worried that demanding responsive design on top of our already tough list of requirements would kill the contest. That it was just too hard. Maybe even impossible. Silly us.
Once again, you overwhelmed us with your out-of-the-box creativity, dazzling technical chops, and inspiring can-do spirit. During the few weeks of our call for entries, people and teams from 36 countries produced 128 astonishingly excellent apps. With that many great entries, judging was a beast! Fortunately we had excellent help. But enough about us. On to the winners!
Grand Prize Winner
The mysteriously named L&L has won the 10K Apart Grand Prize for Bytes Jack, an HTML Blackjack game that is totally fun to play—unless you have a problem with gambling, in which case, try one of the fantastic runners-up: Space Mahjong by Toby Yun and Kyoungwoo Ham (Best Technical Achievement); Sproutable, by Kevin Thompson (Best Design); or PHRASE: Make Lovely Circular Patterns Based on Text Phrases (People’s Choice), by Andy Gott.
In addition to these four winners, there are twelve honorable mentions that will delight any visitor—and astonish any web designer-developer who tries to figure out how these wizards worked their magic in under 10K. See all the winners or view the entire gallery and decide whom you would have awarded best in show.
P.S. We love you
An Event Apart thanks our hard-working, insanely inspired friends at Mix Online.
The 10K Apart hearkens back to Stewart Butterfield’s 5k Contest of yesteryear. Back then, Stewart challenged web designer-developers to create something magical using less than 5K of code and images—and the community responded with a flowering of creativity and awesome proto-web-apps. Stewart, we salute you!
Fast Company on Adobe Muse
“DESIGN GURU Jeffrey Zeldman, says while he likes Muse for its ease of creating layouts, it still doesn’t answer his plea for a better Internet. ‘Software can’t generate HTML that is search-engine friendly, accessibility-friendly, and portable between desktop and mobile,’ he says. ‘Only web design professionals who understand semantic markup, responsive and adaptive web layout, and mobile user interface can do that.’”
Must-read: Switching the display of content and navigation based on browser size
JEREMY KEITH: “Right after I wrote about combining flexbox with responsive design—to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter. He pointed out a really elegant solution to the same use-case that makes use of
Elegant indeed! Follow the delightfully simple code and explanation at Adactio: Journal—Re-tabulate.
10K Apart – Responsive Edition
AS THE TITLE indicates, this year’s 10K contest requires that your applications be “reasonably responsive” (yes, it’s vague by design). The Responsive Design movement Ethan pioneered is still learning how to walk in the real world. We felt it best to leave some wiggle room to encourage new discoveries.