Naming conventions for html/css + MVC?

In HTML/CSS, the id and class selectors are not equivalent. The id carries more weight, so it should be used sparingly. Use it for sections of a page where you have descendant selectors whose class names are the same as other sections but you wish them to be styled differently. Think of the id like a poor man's namespacing for page regions.

Giving each thing a unique id makes your selectors fastest, but bloats your markup and can become a bog to work with. Using unique classes kind of doesn't make sense (classes are used for groups of objects).

Your second option is the cleaner code wise but the selectors are usually significantly slower.

Giving literally everything a unique class in your CSS defeats the purpose of "Cascading" style sheets. Effective CSS leverages the cascade so that you're repeating as little styling effort as possible.

Bear in mind that most HTML elements can be styled directly. I don't need to use <span class="something"><label>... because I can style the label itself without using a span. Most people use far more divs and spans than they really need to.

You can also style by inference. For example, I might have an <H3 class="searchResults"> followed by a UL of search results that I want to style uniquely from other ULs on the page. Instead of giving the UL a specific class (of, say, "searchResultsList") I could just use the following rule:

H3.searchResults + ul {some styling...;}orH3.searchResults + div > * {some styling...;}

As for CSS organization, I find it helpful to organize my files by categories of elements, starting with the simplest and most ubiquitous cases, like a, p, etc. and then handle more complex elements like tables later. I group everything by specificity, because that's part of the cascade rules. An element is handled first in its order of appearance in the file, and then by how specific a rule affecting it is. I place all my one-instance and utility classes last (.iconWhichAppearsOnceEver, .noBordersTable, etc.)

body{}a {}p {}h1,h2,h3,h4,h5,h6 {}h3.searchResults {}...table {}thead {}thead th {}thead th a {}thead th.noFill a {}...