Managing CSS 3/4 - Tools & Tips
Avoid using the controller name & action as cope
That should be a last resource solution. You start adding controller names and (worse) the list of actions to apply to those styles to when different actions belong to different layouts. Besides, from a css point of view, it’s easier to understand what goes with .user_dashboard than #home_controller.index
In our rails app, we use nested layouts to have as many layouts as the design requires
Use Compass or learn from it
Compass is a very well documented library of SASS mixings. Among other things, it’s lets your define which level of legacy support you want before applying the convenient hacks and vendor prefixes. Even if you don’t intend to use it, take a look at the source code to get ideas for your own mixins. A lighweight alternative is Bourbon.
To keep it as small as possible, you can download a compiled version with only the “checks” that you want to perform. For example, pick background-size to check if there is support for
background-size: cover, and load a polyfill for this kind of backgrounds if
Modernizr.backgroundsize is false.
CSS properties order
It’s a good practice to start with those properties affecting the layouts (position, width, padding, float…) and leave the harmless at the end (color, background, border-radius..). After dealing with stunning IE quirks your paranoia gets to a point in which you start considering every property as a potential offender (good, keep on doing that), but there are rules worse than others. Opacity is absolutely harmless, isn’t it? except if you use a filter for old IE’s and it changes the z-index stack order
Another practice that we follow is to go with the flow, unless there is a good reason the rules add
margin-right (or left if the float to the right), but not up or right because that has lead in the past to elements fighting to get closer using negative margins.
Use the Chrome Developer Tools
Your IE has started to utterly ignore your declarations? After clearing the cache for a thousandth time, may be you have reached the IE(<10) limit of 4095 selectors for file, in which case you should get a css splitter to divide that file in two (for rails we use zweilove/css_splitter)