The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Wrapping existing classes for scalability

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #244279

    I am really interested in software architecture, even in CSS and HTML I found something interesting SMACSS and BEM methodologies.
    I am still discovering them, I need advice from more experienced web developers.

    First of all consider following example

    <div class="col-md-4 col-sm-4 col-xs-12">
    <div class="app-store-item">
    <i class="app-store-item__icon fa fa-apple fa-2x"></i>
    <h3 class="app-store-item__title">Apple Store</h3>

    I have a lot of places in code like this col-md-4 ....
    Specifying like this makes it coupled with Bootstrap in this case.
    Maybe in the future I want to use another grid technology, than I need to replace all occurences everywhere in my code.

    So SMACSS methodology has separate layer called Layout

    Maybe it makes sense to wrap existing bootstrap classes like that

    @import "bootstrap";
    .grid-md-4 {
      @extend .col-md-4;

    So I need to change my SCSS file if I want to migrate to another grid system.

    Please share your thought about this.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.