I've been messing around with SASS and BEM for the last few months. I recently starting 'thinking' in modular in terms of building out my applications (for re-usability and simplicity).
I am coding my modules at the minute using the template fellow. I have tried to build this as simple as possible so that if I ever come back to my code, I will be able to figure it out as quickly as possible without moving back and forth to try and identify which element does what.
HTML
<div class="moduleType">
<div class="moduleType__moduleName">
<div class="moduleType__moduleName__block">
<div class="moduleType__moduleName__block__element moduleType__moduleName__block__element--modifier1">
<p class="moduleType__moduleName__block__element__p moduleType__moduleName__block__element__p--modifier1"></p>
</div>
<div class="moduleType__moduleName__block__element moduleType__moduleName__block__element--modifier2">
<p class="moduleType__moduleName__block__element__p moduleType__moduleName__block__element__p--modifier2"></p>
</div>
</div>
</div>
</div>
SCSS
.moduleType {
&__moduleName {
&__block {
&__element {
&--modifier1 {
}
&--modifier2 {
}
&__p {
&--modifier1 {
}
&--modifier2 {
}
}
}
}
}
}
Here is my module. I would love to know if anyone has any pointers or advice on how I could further simplify/optimise my coding structure.
HTML
<!-- Module Start -->
<!-- cardItem Start -->
<div class="container-fluid socialFeed__cardItem">
<!-- cardItem Hero Start -->
<div class="row">
<div class="col-xs-24">
<div class="socialFeed__cardItem__heroImg__cont">
<img src="" class="img">
</div>
</div>
</div>
<!-- cardItem Hero End -->
<!-- cardItem Info Start -->
<div class="row">
<div class="col-xs-24">
<div class="socialFeed__cardItem__info">
<div class="row">
<div class="col-xs-7">
<div class="socialFeed__cardItem__info__playerImg__cont">
<img class="img" src="../assets/img/IMG_0894.jpg">
</div>
</div>
<div class="col-xs-17">
<div class="socialFeed__cardItem__info__playerText__cont">
<h5 class="name">Person Name</h5>
<p class="text">Consectetuer adipiscing elit. Aenean commo doligula eget dolor...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- cardItem Info End -->
</div>
<!-- cardItem End -->
<!-- Module End -->
SCSS
//---- widgets__socialFeed START
.socialFeed__cardItem {
width: 205px;
height: auto;
&__heroImg__cont {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: gray;
height: 165px;
width: 100%;
.img {}
}
&__info {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
height: 80px;
width: 100%;
&__playerImg__cont {
height: 80px;
width: 100%;
position: relative;
.img {
height: 55px;
width: 55px;
border-radius: 50px;
top: 11px;
left: 7px;
position: absolute;
}
}
&__playerText__cont {
height: 80px;
width: 100%;
position: relative;
.name {
left: 12px;
position: absolute;
font-size: 14px;
padding-right: 5px;
}
.text {
left: 12px;
top: 20px;
font-size: 11px;
position: absolute;
padding-top: 8px;
padding-right: 5px;
line-height: 13px;
}
}
}
}
//---- //widgets__socialFeed END