Search code examples
csssassextend

Am I overusing sass extend here?

I'm using sass %extend with display:flex for the sake of cross browser compatibility and I ended up with this long list of nested elements in my css file just for the flexBox.

the styling :

display: -webkit-box;
display: -ms-flexbox;
display: flex;

Is this alright or is this an overuse of %extend and if so what is the best practice.

Thanks

Solution

  • This is good practice because if you want to use this property you write like this

    For Example: 
.row{display: -webkit-box; display: -ms-flexbox; display: flex;}
nav .container{display: -webkit-box; display: -ms-flexbox; display: flex;}
nav form{display: -webkit-box; display: -ms-flexbox; display: flex;}
nav form .input-group{display: -webkit-box; display: -ms-flexbox; display: flex;}
nav ul:first-of-type{display: -webkit-box; display: -ms-flexbox; display: flex;}
.sr-buttons.internal{display: -webkit-box; display: -ms-flexbox; display: flex;}
.main-form .status{display: -webkit-box; display: -ms-flexbox; display: flex;}
.main-form .status>aside>ul:first-child{display: -webkit-box; display: -ms-flexbox; display: flex;}
.main-form>ul{display: -webkit-box; display: -ms-flexbox; display: flex;}
.main-form>ul>li{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish>div{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish>div>ul{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish>div>div{display: -webkit-box; display: -ms-flexbox; display: flex;}
.publish.active>div>ul>li{display: -webkit-box; display: -ms-flexbox; display: flex;}

One more option you can use like this:
.commonFlex{display: -webkit-box; display: -ms-flexbox; display: flex;}