Creating a CSS naming convention within an MVC Project with Layouts can be a challenging task.
The use of Layouts introduces the necessity of being cautious when selecting class names, as they could potentially be overridden by classes declared in the Layout CSS file.
One guideline that I follow is to reserve element classes for styling purposes and use element IDs for jQuery functionality.
For example, consider a layout structured 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 possible solution would be:
.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've also come up with another option, which may pose a risk if there's a ".rgt-ctn" class in the parent layout that could potentially override this one:
.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's another approach that appears cleaner but might make it harder to identify and edit elements due to the lack of DOM hierarchy visualization:
.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;
}
Are there any better approaches to consider?