Custom Attributes are Fast, Good, and Cheap

After years working with HTML and CSS, we have come to a surprising conclusion.

Avoid using CSS classes and className and classList when deriving styles based on some “state.” Instead, prefer HTML element attributes, and CSS attribute selectors.
— Me, this week, all the time

Advertisement

This week in front end architecture

In a react/redux application:

• add a checkbox
  in jsx

• capture its state by setting its vDom state with { [name]: !this.state.checked }
  in a switch statement

• unit tests are jest snapshot diffs
  in typescript

• className="bootstrap" or className={style.injection}
  incompatible

Making simple things hard in the front end again.

Pseudo-Comments in CSS (Or, How Browsers Parse Styles)

The CSS spec does not mention it, but you can mimic C-style and/or unix-style line comments in CSS files (with some caveats). Others have written about them before (see in particular, SitePoint’s Web Foundations post covering CSS Comments). The present post examines them in further detail.

[Note: Thanks to Louis Lazaris and Web Tools Weekly, this post was originally published on October 21, 2015, at http://www.sitepoint.com/pseudo-comments-in-css-or-how-browsers-parse-styles/. It is actually a follow-up (slightly modified) to my earlier post on CSS line rule comments. ]

CSS line comments

CSS line rule comments

It’s not widely understood but, yes, you can use line comments in CSS files.

The term “line comment” is a misnomer. It should actually be “rule comment” or
“ruleset comment”, which terms I use in the following text.

See the fully fleshed out example on rawgit.com ~ http://bit.ly/css-line-comments