Refactor: Separate SCSS files to reduce index page content

[adolfogustavo]

Hi folks - As an initial effort to start reducing so many lines of code in the index.vue file, a good practice is to start creating separate folders for the styles, each identified with the content that they impact within the app, this will also give better clarity at the time of reading the code for future contributors.

Based on what we have currently, I propose to have this easy-to-read/edit distribution:

[adolfogustavo]

I have created a PR for this #26, let me know if you agree with this! Thanks

[acapeletto]

Hi @adolfogustavo! Thanks for working on this issue. Instead of creating multiple .scss files, we should create new single file .vue components with the scoped attribute. As a starting point we can create the sidebar and output components, and keep the general styles in the default.vue file.

[adolfogustavo]

Hi @acapeletto - Thanks for answering!

Do you want to create those .vue files and still have those styles inside the CSS tag on the same .vue component?
Example :

sidebar.vue

<div class="sidebar" :key="componentKey">
 .... // Component here       
 </div>

<style lang="scss">
.sidebar {
  width: 210px;
  background: #1e1e1e;
   ....
}
// All .sidebar styles here
</style>

If so, I think it is still a good idea to have multiple .scss files to have shorter and more organized files (That's why I proposed the issue in the first place)

What I wanted with my approach was to start uncoupling the styles before separating/re-composing the current index.vue, so when we create our new components folder, we can call those styles on each one of the files/components that we create.

What do you think? I'm open to suggestions.

[apresmoi]

Hi guys, I believe the best approach for this in vue is to have the CSS inside the .vue file and also use the scoped feature.

If the files are still too long, maybe we should create simpler components to shorten up those .vue files.

[adolfogustavo]

Good suggestion, I'll deep a little bit more into that and update the PR accordingly - thanks

[adolfogustavo]

Also, @apresmoi could u assign me this issue? Thanks!

[apresmoi]

Assigned!