Tag Archives: CSS

About Using CSS Floats for Primary Layout: Stop It Already

The piece of my CSSConf Asia talk that generated the most heat in the Twittersphere was the following claim:

Floats were invented for one reason and one reason alone: to allow text to wrap around an image. They were not intended to do what we do with them. I know this hurts to hear it: but Floats are the table-based layout of our time. Unless you have to support IE6, stop using them, except in very specific, very limited situations.

So, let’s just add some quick clarity to that, as conference talks need to be more concise than is ideal: floats are cool for tactical uses, and are downright invaluable if you’re supporting old IE and can’t use display:inline-block as yet, let alone Flexbox. Even with inline-block available to you, there are still places where floats are super-handy, like kicking a single element in a toolbar off to the right, or when you really do want to wrap your inline text around an image. Continue reading

Tagged , , , , ,

My CSSConf Asia Video is Now on YouTube: “Scalable CSS”

Woops! I’ve just realized I never posted my slides, either. Here they are:

Tagged , ,

Find the Comments for Bootstrap CSS: ‘Hiding’ in the Less/Sass

Surprisingly, for such a mature and robust open-source product, the basic bootstrap.css file most people download is almost entirely uncommented. The only comment characters you’ll find are the credits/attributions, an old IE 8-9 hack, and at the very bottom, the sourceMappingURL. And that’s in the unminified version of the file.

This comes from a very fundamental bias on the part of the authors: they’d apparently really, really, really like you to use Bootstrap with Less or Sass. The source files for Bootstrap CSS are Less files, and have to be compiled into the basic .css or .min.css download versions. In the source, you’ve got all kinds of handy inline comments. And I have to admit, it’s an awfully good idea to use a preprocessor with Bootstrap. There’s a whole additional layer of abstraction and customizability that opens up to you when you use one: whole files full of handy variables and mixins, and the ability to toggle CSS modules on and off at-will, by simply commenting out an @import statement from the bootstrap.scss/bootstrap.less file. (Which, indeed, is nothing but a long list of categorized @import statements.) Leaving aside the other virtues of CSS preprocessors, using one with Bootstrap suddenly switches it from being monolithic, over-opinionated, and fit only for rapid-prototyping, to something a real CSS pro could reasonably take home to Mom. Particularly if you’re on Bootstrap only because your team is used to it and doesn’t want to switch to something a little more pro-grade (<cough>… Foundation… <cough>), at least using a preprocessor is the way to go.

That said, I think a good chunk of the Bootstrap community never has used it with a preprocessor, and won’t do so soon. Those folks are missing out in a major way. With decent comments, you can easily toggle the modules on/off by just commenting them in/out, and you can better understand what Bootstrap is doing for you. (Largely so you can get it to STOP doing the things that are bugging you.) For those folks, I’ve got a recommendation.

Download either the Sass or Less version of the source. Even if you’re not going to start using Sass or Less, you can crack open the source files and see all the helpful comments there. Starting from the bootstrap.scss or bootstrap.less files, you can see all the individual modules that are @import-ed, and the order in which they contribute to the final compiled .css file. Then, diving into the individual modules, you’ll find comments that explain what most of the classes do and why they do it. And, using the module files as a reference for start and end points, you can more easily strip out the modules that contain classes that are just cruft.

Bonus recommendation: tell the dev team (politely and helpfully!) that you’d like to see the comments make their way into the un-minified .css, perhaps with an indicator for where each module begins and ends.

Tagged , , , , ,