IN BIG WEB SHOW № 110, Nicole Sullivan and I discuss CSS Conf, building scalable systems that won’t break, designing for speed and performance, learning Ruby, Object Oriented CSS, a CSS Style Guide, Type-o-matic, practical takeaways from stunt CSS, pairing as a work method, sexism and racism tests, and setting aside biases when selecting conference sessions. Enjoy!
Sponsored by Typekit.
WE ARE PLEASED to present an excerpt from Sass For Web Designers by Dan Cederholm, available now from A Book Apart.
DESIGNER, developer, banjoist, Dribbble co-founder, and all-around nice guy Dan Cederholm and I discuss fear of CSS pre-processors; the craft of code; growing the Dribbble design community; transitioning from a two-person part-time start-up to a full-time company with employees; and Dan’s new book Sass For Web Designers in Episode № 102 of The Big Web Show on Mule Radio.
IN EPISODE No. 79 of The Big Web Show (“everything web that matters”), I interview CSS guru, Microformats co-founder, O’Reilly and New Riders author, and An Event Apart co-founder Eric A. Meyer (@meyerweb) about upcoming CSS modules including grid layout, flexbox, and regions; his career trajectory from college graduate webmaster to world-renowned author, consultant, and lecturer; founding and running a virtual community (CSS-Discuss); becoming an O’Reilly writer; the early days of the Mosaic Browser and The Web Standards Project’s CSS Samurai; “The Web Behind” variation of The Web Ahead podcast, and more.
Listen to the episode.
Eric A. Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML and CSS. He is the principal consultant for Complex Spiral Consulting and lives in Cleveland, Ohio, which is a much nicer city than you’ve been led to believe. Author of “Eric Meyer on CSS” (New Riders), “Cascading Style Sheets: The Definitive Guide” (O’Reilly & Associates), “CSS2.0 Programmer’s Reference” (Osborne/McGraw-Hill), and the CSS Browser Compatibility Charts, Eric co-founded and co-directs An Event Apart, the design conference “for people who make websites,” and speaks at a variety of conferences on the subject of standards, CSS use, and web design.
Photo: Chris Jennings
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.
“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.
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
TUESDAY, 3 APRIL 2012, was Day II of An Event Apart Seattle, a sold-out, three-day event for people who make websites. If you couldn’t be among us, never fear. The amazing Luke Wroblewski (who leads a day-long seminar on mobile web design today) took excellent notes throughout the day, and shares them herewith:
In his The Future is Now talk at An Event Apart in Seattle, WA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Create shiny new visual elements with no images using progressive enhancement and CSS that is available in all modern browsers.
In his A Philosophy of Restraint talk at An Event Apart in Seattle, WA 2012 Simon Collison outlined his design philosophy and how he applies it to web projects. Embrace constraints; simplicity and complexity; design aesthetic; design systems as foundations that prepare us for future projects and complexity; affordances and type; focus and content; audit and pause — prevent catastrophic failures and shine a new light on what you’ve learned with each project.
In his Touch Events talk at An Event Apart in Seattle, WA 2012 Peter-Paul Koch talked about touch support in mobile browsers and how to handle touch events in web development. Includes a ranking of current mobile browsers; interaction modes in mobile versus desktop (mouse) and keyboard — how do we adjust scripts to work with touch?; touch events; supporting modes; event cascade; and “stick with click.”
Alas, Luke could not take notes on his own presentation. Here’s what it was about: When something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlined how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.Instead of thinking about how to reformat your websites to fit mobile screens, attendees learned to see mobile as way to rethink the future of the web.
In her What’s Your Problem? Putting Purpose Back into Your Projects talk at An Event Apart in Seattle, WA 2012 Whitney Hess outlined the value of learning about opportunities directly from customers. Understand the problem before designing the solution. Ask why before you figure out how. There is no universal solution for all our projects, we need to determine which practices are “best” through our understanding of problems. Our reliance on best practices is creating a world of uniform websites that solve no one’s problem. Leave the desk and interact with people. Rather than the problem solver, be the person who can see the problem.
At An Event Apart in Seattle WA 2012, Jared Spool walked through what makes a design intuitive, why some users need different treatment, and the role of design. Current versus acquired knowledge and how to bridge the gap (how to train users, thus making your site or app “intuitive”). Redesigns and how to avoid disaster. Design skills. The gap between current knowledge and target knowledge is where design happens. Why intuitive design is only possible in small, short iterations.
Day III begins in 90 minutes. See some of you there.
Photos: AEA Seattle Flickr pool or hashtags #aea and #aeasea on Instagram.