Better CSS - Breaking prefix hell and better code manipulation.
CSS can be useful but it also can be anoying. Because of that there are many tools to make CSS easier to write and to read. CSS prefixes are useful. They have meaning but they are anoying when you do bigger project and you know that you need them.
What is prefix?
If you are here and still don't know what CSS prefixes is I'll tell you. It's a feature that allows you to use experimental functions of browsers before they're done. It may have some bugs but it's really long time ago when I fight against some experimental functionality bugs. And now what it looks like in code:
This code do that element with class "rounded" will actualy be rounded because of "border-radius" which is new property in HTML5. Nowadays browsers can handle this property without prefixes I showed that just for example. You can see prefixes like "-webkit-", "-moz-", etc. What that means? It's simple.
Chrome, Safari, Opera (since 16): -webkit-
Mozilla Firefox: -moz-
Internet Explorer: -ms-
Opera (to 16): -o-
But there are more prefixes not only these four. Although these are most usual. But for sure it's annoying to write something just for work with all browsers and there are better ways.
Do you really want to write prefixes?
I don't think anyone really like to always write these prefixes. You can use some preprocessors like LESS (with LESSHat of course), SASS or Stylus that will help you. (You can stop here if you like preprocessors way) But what way isn't that good. You have to use their mixins and it's just as anoying as using prefixes because you still have to know where have to be prefixes and where don't and use mixin there. How to write W3C CSS and still preserve functionality? To be honest it's easier than many people think.
JavaScript libraries like Autoprefixer and Myth do that you need. But there is also some negatives. These libraries are really big (Autoprefixer about 33kB and Myth about 50kB non-minifed). If you really want to break prefixes that way, you have to do that server-side or instal it in your editor (with Autoprefixer it's posible) but that's also not good way because your server will have to send all prefixes in CSS files and requests will take longer. You can't send another file request when it's that big just for expand style sheets.
How to handle prefixes client-side
If you want to use same CSS everywhere and for every browser without redundant data you can use my favorite JavaScript library PrefixFree made by Lea Verou. It's client-side prefix breaking tool and work just fine with below 2kB(!!!) non-minifed JavaScript code. That's far smaller than Autoprefixer or Myth. You can argument that Myth can work with CSS variables but PrefixFree can do this and a lot more because of plugins. If you're not satisfed with done plugins you can really easily do your own. I have my own plugins for PrefixFree here.
PrefixFree plugins
As you can see in my Github repository I have there some plugins you can add to your projects. Best plugin that I made is in my opinion Nested CSS plugin that allows you to do what you can do with preprocessors and that is nested CSS like this:
I really love nesting CSS that way. It's more readable for me. What do you think about prefixes, preprocessors and these JS libraries? Leave a comment. :)
