Better style inside a vue.js app or outsource to the site embedding it?

Question

I'm building my first vue.js app and I'd like to have some help on deciding a design approach. This app is going to be embedded inside a page of a site - built with Drupal 8. Both app and site are going to use bootstrap 4 as base framework and we're going to use sass to style.

It's a quite simple app: a multistep form with some ajax call done to the aforementioned site. It has anyway some components - one for each step, for some of the more complex input, for a sidebar showing the result of the ajax calls and so on.

I need to decide the "guideline" for styling this app and I'd like to get some help\insight to what solution is better.

On one hand, I could put the style inside the app itself; on the other hand I could leave all the style to the one present on the site.

As far as I can see the benefits of the first approach are the use of scope of each module, thus having a better "modularity". However, putting the style all inside the site would avoid code duplication - simple example: custom color variables.

Personally I can't see for now other differences right now.

I haven't found material about the suggested approach and the pros\cons.

Could advice me of which approach is the best? Thank you.

Answer 1

It depends on the project, but you can make a list of cons and pros based on your project brief. If there are very few (or 0) changes in the future or it's based only on small components (not much style) then go with component-scoped styling. If the project is big, always go with a style pattern like the 7-1 pattern

I prefer working with the 7-1 pattern pattern.

Pros: - Scalability or future updates like you mentioned the color variables case. - You don't depend on Javascript to load the style, depending on how you write the app or how it loads, it may have glitches.