Managing CSS 4/4 - Box of Tricks
I’ve been coding css for years and I couldn’t explain properly what I’ve been learning. It’s not that I could just start writing on any other topic like if I’ve had a well structured index on my mind to follow, but layouts with css feels specially messy. You learn how to find your way around problems rather than memorizing the specific cross-browser solutions, because that would be like learning by heart the list of bugs solved by a project during years.
You can spend hours of trial and error till you find the right combination of markup and rules for a list of browsers, and the pros, cons and inconsistent behaviors of all those iterations are somehow lost, you remember which were the parameters to play with and watch out for(negative margins, overflow, position relative, an inner wrapper with max-width:100% …) but you are likely to repeat that trial and error the next time that you find yourself on a similar situation. And this a language in which a technique to get a 2 columns layout working deserves the name of holy grail…
Hopefully flexbox will make most of these problems a thing of the past, but in the meantime I’d like to start creating a small personal library of common patterns that work good enough, and that are easy to modify in order to expose the different issues across browsers.
I started with these three:
See the Pen Issue with negative margins by Fernando Sainz (@fsainz) on CodePen
See the Pen Media Wrappers by Fernando Sainz (@fsainz) on CodePen
See the Pen Floated Media + one line fields (with ellipsis) by Fernando Sainz (@fsainz) on CodePen
I read a comment on HN about sysvinit which I think is a great (and sad) reply to those who think that css is pretty good as it is today:
css works only if you combine incredibly low expectations with a bad case of Stockholm syndrome.