Common practices do not necessarily mean best practices

This is a post about “recommendations” that I consider bad practices (I am less concerned by their methods than I am about their adoption.) This is my short list:

Using box-sizing:border-box on “everything”

Using Conditional Comments to plug classes to target Internet Explorer

Using html 5 elements with a JavaScript shim

Using classes; never, evar, using IDs

Box sizing

*,*:before,*:after{box-sizing:border-box;}

box-sizing is a handy property that helps solve problems related to mixing a box’s dimensions with border and/or padding (see the box-model). Something calc() can do too, but calc() is supported by fewer browsers.

This question on stackoverflow summarizes my thoughts about this hack fairly well:

Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously. Seems a bit radical imho :-)
Why did Bootstrap 3 switch to box-sizing: border-box?

I agree with the poster, this is a pretty radical move. Using box-sizing:border-box means ignoring old browsers from the get-go. It means closing doors for no good reason. As far as I know, designers and developers have been able to do without this property for years. When it landed, box-sizing was seen by most developers as a tool to solve a specific challenge, not as a means to abandon the “classic” box model.

How many boxes on a page require such styling? And if there are not that many, it should be simple enough to provide a fallback for old browsers, assuring the reach of a larger audience.

This styling is no silver bullet either. It has issues with images, min/max-width/height, and determining content box’s dimensions… In any case, we should not simply dismiss a proven method under the pretense that it is “counter-intuitive” (but is it really?).

Lastly, we cannot talk about rules involving the universal selector (*) without mentioning performance. For one, csslint.net tells us that “the universal selector is known to be slow”. I know this point is dismissed by the border-box supporters but nonetheless, the concern is real for older browsers and for authors who are getting 90+ Page Speed scores (dixit Paul Irish).

If you think supporting old browsers is a waste and that you cannot do without box-sizing:border-box, make sure to switch to calc() as soon as you decide it’s time to drop IE8.

I think this approach induces bad practice because it creates different contexts; it leads to styling for modern browsers first, however browser compatibility is much easier to achieve via progressive enhancement than graceful degradation.

Favoring this approach over hacks like _property and *property makes you duplicate selectors and write declarations in different rulesets which makes things more difficult to maintain. Also, using a class to target a browser means adding weight to your styles which in turn may create gaps/discrepancies between browsers.

The technique is counter-productive and if it is done in the name of CSS validation, it is not worth it.

HTML5 elements served to oldIE

JavaScript is required to “help” legacy browsers make sense of the “new” HTML5 elements (see HTML5 Shiv). But such method goes againstprogressive enhancementand the SoC principal (Separation of Concerns). If the goal is to increase the page semantics, then it is better to use WAI-ARIA roles than section, article, and the like.

Do not use ID

Update: It appers that some people misunderstood the point I was trying to make in this section. Below is a quote from someone else — it is not me saying using id is wrong. I quoted this paragraph to show that we should not follow “recommendations” blindly.

There is never a time when using an ID in CSS makes sense; there is never a good reason to use one; this rule is not breakable.

There is not much to say about this recommendation other than that it summarizes what I’ve tried to convey in this article. Don’t think common practices are the same as best practices. Be critical of everything. Do your homework. Think outside the box. Think for yourself.