MVC 3, CSS, Razor and Visual Studio 2010

Question

How do you guys manage all css styles in MVC 3 projects? Even after I installed SP1 for Visual Studio 2010 I found that css style manager still cannot recognize stylesheet links from layout view files.

I guess Expression Web is also doesn't have any support of this stuff yet. Is there anything you can use to help yourself and manage all that mess easier rather than doing that manually?

Answer 1

I've built some pretty complicated styles and always used the same approach. Nice clean syntax and good commenting in the css file(s). Like this:

/***** /Products/Edit ******/
#productsContainer { background-color: #99bbff; }
#productsContainer fieldset.edit { margin: 1em 0 .2em 0; background-color: #dadada; }
#productsContainer fieldset.edit label { display: block; }
/***************************/

If you stay organized, control the efficiency of your styling, and optionally use something like CleverCSS: https://github.com/dziegler/clevercss, you can manage your styles without complicated overhead and tools that can break. CleverCSS example below:

/***** /Products/Edit ******/
#productsContainer
    background-color: #99bbff
    fieldset.edit:
        margin: 1em 0 .2em 0
        background-color: #dadada
        label:
            display: block;
/***************************/

But yeah, optionally you can use something like WebStorm (http://www.jetbrains.com/webstorm/) to edit your javascript, html, css, etc. Or wait for Expression Web to be ready (I'd guess less than a year until it becomes compatible with MVC).