4

If I had a development workflow that supports SCSS and uses bootstrap. I can place bootstrap tags two ways...

  • Inside the HTML: <div class="col-sm-3 offset-sm-9 col-xl-1 offset-xl-11">
  • Part of the SCSS: <div class="mymain"> with the following SCSS
    .mymain {
       @extends .col-sm-3;
       @extends .offset-sm-9;
       @extends .col-xl-1;
       @extends .offset-xl-11;
    }

Personally my preference is the later since it refactors out the UI layout elements from the HTML/JSX code and debugging will give me the component name.

Although debugging will not give me the offsets and such plus making live changes is going to be more difficult.

What's the more established pattern for larger applications.

Archimedes Trajano
  • 685
  • 1
  • 6
  • 14

1 Answers1

1

one main reason to select the SCSS or even in CSS cases too is re-usability. so if you need to use the same code again you only need to use the class instead of inline modification for each html tag and another reason is maintainability where it is much easier to maintain code in one place that going through all html tags to do that change where you could easily forget one of the tags. another think to think about in re-usability and maintainability is to use a file to contain your SCSS code instead of having it in your page so that you can use all SCSS classes from one place for all your pages. I hope this help good luck further.

GeorgeT
  • 21
  • 1