CSS all in one, or separate by prefix?

Continuing the discussion from Rethinking Web Layouts:

A very interesting and exciting video presentation.

Design may not be one of my strong points, but I couldn’t help but to experiment with some of the newer CSS properties. Well, newer to me, anyway.

I really like the newer CSS properties.

What I don’t like so much is needing to have a mess of prefixed properties. eg.

-webkit-whatever: 
-moz-whatever: 
-ms-whatever: 
whatever:

Four or more lines just to hopefully achieve cross-browser compatibility can really result in bloat quickly.

I’m wondering how others that are already into this keep things manageable.

I could have a big CSS file organized by selectors - and then need to hunt through it to find prefixed properties when / if I need to edit them.

Or

I could have separate “prefix.css” files - and then need to hunt through them when / if I need to edit selectors.

Neither seems ideal.
I’d like to know from others what they prefer / have found works best for them?

Is it only another “It depends” thing?

There are tools like autoprefixer which automate the process so you don;t have to worry about it (although I’ve never had the need to use it).

I tend to avoid most of the prefixes if they are just for decorative enhancement and use the real property as browsers soon catch up these days (think border-radius and gradients). The only place that I still keep prefixes is with animations and keyframes as they are still needed there but in general just keep prefixes to a minimum.

In flexbox for example I won’t use all the variations but just the latest un prefixed flex. As long as the use of flexbox is not for important structural parts of the layout you can get away with just falling back to a default.

3 Likes

Excellent point. Like Jen Simmons said in the talk, (paraphrased)
“You don’t need to code for every browser, if they don’t see _____, they won’t miss it because they’ve never seen it” i.e. If a visitor sees the first or second, does it make that much difference?

Yes that’s a perfect example and I would avoid prefixes for things like that.

It gets a bit harder if you start using flexbox for a three column layout as you have to have fallbacks that make some sense which can be awkward. Although a few people are advocating that you don’t overuse flexbox because of the re-flow issues on page loading. I’ve seen this a lot now because flexbox reacts to content the layout can vary wildly until everything is loaded and is a little disconcerting but unavoidable…

I haven’t noticed any re-flow issues, but then, I’ve only tested on localhost so far so there isn’t any delay with getting assets.

I tried using a CSS file without any flex in it to see what the page would be like for browsers that needed prefixes that weren’t in the CSS. .

Different look, but not broken. (after adding a couple width values)

Might be a different story if the site was for a client. I wouldn’t want to deal with any “It looks different using my friends computer.” complaints.

But for my own site as long as it looks OK without the SS enhancements that’s fine with me.

I looked at autoprefixer, it looks good, but I think for me, installing it for a one-time use would be more trouble than it would be worth ,

You can see them documented here. Although I tend to think that content loading and content moving is all part and parcel of the web. It’s not a picture so don’t expect a picture to display:)

The page http://output.jsbin.com/iYEmaTUF/1 didn’t look like the screen vid of it loading in for me using Firefox. No where near as “jumpy”.

I do notice some differences between his demo and mine
mittineague.zip (106.7 KB)

His has quite a few media query points, mine has but one.
The nav is between the main and the aside, mine is in header.
The JavaScript transitions may be causing some buggyness*, mine is a simple display block none toggle.

*Repro steps
note left edge of contaner
narrow view-port until hamburger shows
open menu
widen view-port

The left edge “clings” as the view-port widens and is now further to the right than it was when the page first loaded.i.e width values are getting foobar for some reason.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.