[W3Conf] Nicolas Gallagher: “The purification of web development”

“Best practices” are not “absolute truths.”

Nicolas was an anthropology student for longer than he’s been a web developer.

Heraclitus (535BC): philosopher. Contempt for human kind. Misery is the way. Sad Keanu of his time. Died of rubbing cow poop on himself and laying in the sun. Major idea: everything is an illusion. “You cannot step twice into the same river; for fresh waters are flowing in upon you.”

Democritus (460BC): also contempt for human kind. The “laughing philosopher”. World’s first troll. Conservation of mass and energy. Atoms.

These ideas were left in lurch for thousands of years until science found them. Plato and Aristotle rejected these ideas, but you can’t blame them. The ideas came back when the time was right.

Web development is also a world of ever-changing contexts. Nicolas keeps doubting assumptions that were true, even six months ago.

HTML class attributes were added for CSS1 “to increase granularity of control over elements.”

The CSS Zen Garden (2003) was one page of HTML, but there were loads of different designs for it where only the CSS changed.

Real statements from real people and real specs:

“Don’t use unsematic class names.”

“Your HTML, like diamonds, are forever.”

“Authors are encouraged to use class attribute values that describe the nature of content, rather than values that decirebe the desired presentation of the content.”

This stuff is crazy to Nicolas. He once designed his blog with zero classes. Making (so called “perfect semantics”) But making changes became impractical. Hard to read. Hard to understand. Hard to make style changes.

This is more true:

“Class names are for us, not machines.” — @necolas #w3conf

— Carwin Young (@carwin) February 22, 2013

There is a notion of “ugly” HTML class names though. This kind of class name is fashionable at the moment: hyphenated-lowercase-4-life. E.g.:

.button { }
.button-group {}
.button-primary {}
.button-group-item {}

This kind of thing doesn’t communicate much. Contrast that to these “ugly” class names:

.Button {}
.ButtonGroup {}
.Button--primary {}
.ButtonGroup-item {}

This naming convention communicates much more. Double dashes are a modifier. Single dashes is a component child. These aren’t ugly. They may not be fashionable at the moment but maybe they will be. This particular pattern comes from the Russian search engine Yandex.

#W3Conf so after Hungarian notation for C, @necolas is suggesting Russian notation for CSS classes (from Yandex)

— Kevin Marks (@kevinmarks) February 22, 2013

Note: There may be some historical reasons on why classnames have which characters:

#w3conf There actually is an historical reason we avoided underscores in class (and ID) names: developer.mozilla.org/en-US/docs/Und…

— Eric A. Meyer (@meyerweb) February 22, 2013

Another old best practice is: “Don’t use extra elements.” Nicolas has gone deep into the world of pseudo elements to avoid the use of extra elements. In retrospect, this made it much harder to understand what is going on. Not that “junk” markup is good, but stuff like Web Components makes much more sense.

CSS is the wrong tool for imparting structure on content/design. HTML is for that. Web Components gives us the ability to use the correct tools without worrying about “junk” markup.