Optimizing CSS Names in MVC Layouts

Question

I need to create a CSS naming convention in an MVC project with layouts.

Using layouts creates a need very carefully when it comes to choosing a class name, because it can be overridden by one declared in the CSS layout file.

One rule I use is to have only element classes for the style and element id for using jQuery.

Say I have a layout like this:

<div class="lyb-ctn">
    <div class="lyb-wrp">

        @RenderBody()

        <div class="lyb-ctn-rgt">
            <div class="lyb-ctn-subscribe">
                <p class="lyb-ctn-subscribe-title">Subscribe</p>
                <input placeholder="Email" /><input type="button" />
            </div>
            <div class="lyb-ctn-categories">
                <p class="lyb-ctn-categories-title">Categories</p>
                <div class="lyb-ctn-categories-ctn-list">
                    <div class="category">
                        <p>Cars</p>
                        <p>Boats</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

One of the options:

.lyb-ctn {
    position:fixed;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    background-color: #f2f2f2;
    padding-top: 50px;
}

.lyb-wrp {
    max-width: 960px;
    width: 95%;
    margin: auto;
    background-color: #ffd800;
}

.lyb-ctn-rgt {
    float: right;
    width: 235px;
    border: solid 1px #ff6a00;
}

.lyb-ctn-subscribe {
    width: 100%;
}

.lyb-ctn-subscribe-title {
    color: #80bd01;
}

.lyb-ctn-categories {
    width: 100%;
}

.lyb-ctn-categories-title {
    color: #80bd01;
}

I am also creating another option, but this one, I think, is dangerous, because if ".rgt-ctn" exists in the parent layout, it can override this:

.lyb-ctn {
    position:fixed;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    background-color: #f2f2f2;
    padding-top: 50px;
}

.lyb-ctn .wrp {
    max-width: 960px;
    width: 95%;
    margin: auto;
    background-color: #ffd800;
}

.lyb-ctn .wrp .rgt-ctn {
    float: right;
    width: 235px;
    border: solid 1px #ff6a00;
}

.lyb-ctn .wrp .rgt-ctn .subscribe-ctn {
    width: 100%;
}

.lyb-ctn .wrp .rgt-ctn .subscribe-ctn .title {
    color: #80bd01;
}

Here is another one that seems clean, but we cannot see the hierarquy from the DOM when we look at it, and I think it might be harder to find an element to edit:

.lyb-ctn {
    position:fixed;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    background-color: #f2f2f2;
    padding-top: 50px;
}

.lyb-wrp {
    max-width: 960px;
    width: 95%;
    margin: auto;
    background-color: #ffd800;
}

.ctn-side-options {
    float: right;
    width: 235px;
}

.ctn-subscribe,
.ctn-categories,
.ctn-tags {
    width: 100%;
}

.ctn-subscribe .title, 
.ctn-categories .title,
.ctn-tags .title {
    color: #80bd01;
    padding: 25px 0 10px 5px;
}

.ctn-categories .ctn-list, 
.ctn-tags .ctn-list {
    width: 100%;
    background-color: #fff;
    border: solid 1px #e6e6e6;
    border-radius: 3px;
    margin: 0;
    padding: 0;
}

?

Answer 1

TL;DR: .

-, :

OOCSS - http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

SMACSS - https://smacss.com/

BEM - http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

, CSS , . , .

, , CSS, SASS - http://sass-lang.com/, LESS - http://lesscss.org/ STYLUS - http://learnboost.imtqy.com/stylus/

, , , , . (. - http://thesassway.com/advanced/modular-css-naming-conventions)

, CSS- JS- - , js-prefixed. , JS .

, , - Mailchimp - http://ux.mailchimp.com/patterns

- :

" CSS MVC . , , CSS ."

, CSS ( JS) . , , - , .

- / ?

, , . , . .

<div class="layout-one">[ALL DESCENDANT CONTENT HERE]</div>
.layout-one p {
    color: green;
}

<div class="layout-two">[ALL DESCENDANT CONTENT HERE]</div>
.layout-two p {
    color: red;
}

, , , , . , , , .

:   .layout-one p {} ,   .layout-one__p {},.layout-one__h4 {}

, , BEM, . , HTML-, - .

, , .

Answer 2

, - . : (I Believe) .lyb-ctn .wrp , , .lyb-ctn .wrp.

.lyb-ctn .wrp{
    position:fixed;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    background-color: #f2f2f2;
    padding-top: 50px;

.wrp, ..lyb-ctn class

    max-width: 960px;
    width: 95%;
    margin: auto;
    background-color: #ffd800;

}

. , .

, .

Answer 3

I would first use the name camelcase

second, use as many classes as possible and at least ids in css, as this allows you to reuse code, it's also better to have

.w100 { width: 100%; } .black { color: black; }

than

.something { width: 100%; color: black; }

or even worse

#something { width: 100%; color: black; }