How to work with CSS efficiently?
I have spent many hours trying to find out what causes what behavior changes when I made some small alterations to the styles in a web page from the standard MVC template in VS 2013. It uses Twitter Bootstrap.
I find it extremely difficult to trace styles sprawled all over the place. For example, the menu in the layout page is tagged with at least six classes:
collapse. It is time consuming trying to find out which style of which class is affecting some behavior. The F12 Toolbar in Chrome helps a bit, but I find it confusing also.
Can people share any tricks and how they climb the CSS curve.
Chrome DevTools via F12 is your best option. It would be in your best interest to become effective with it.
Here is Google's documentation on how to use Chrome DevTools to edit and inspect the DOM: