I would like some help adding or removing items from this list and I invite any other commentary that you wish to impart.

The examples are representative of a React/JavaScript project but could apply almost anywhere.


Pros and Cons of Separate Files for State, View and Style


  • Easy navigation. The developer can immediately see which components are connected and/or styled without opening any file. The files can be opened side by side without issue.

    If a ViewName.vm.js file exists, it's connected to State. If a ViewName.module.scss file exists, it's Styled. (Or, in the case of JSS or other CSS-In-JS solution, a ViewName.styles.js file. The ViewName.module.scss pattern is required by Create-React-App to use CSS Modules. Also vm stands for "view model", since State is a model for the View. However we could rename those to ViewName.state.js if desired.)

  • Less mess. Following the separation of concerns principle is a good way to prevent spaghetti code.

    In a large project especially, it is common to have 9-10 imports and 50-150 lines of code just to connect and map your State to your View. It is also not uncommon to have 150-300 lines of code just to style one component. If we mix them all into one file, then files become larger and messier and it is easy for the developer to forget that there is actually a separation between all of these concerns.

  • Decisive organization. When you separate State, View and Style into separate files there is no question where some piece of code goes.

    Does the code to connect a View to State go at the bottom of the file? In the middle, right after the View? Where do we put styles? At the top of the file or perhaps right on top of the particular View class that is being styled? With separate files, there is no question.


  • More files to deal with.

    More files to edit to change one component. More files to look at when navigating the project.

closed as too broad by gnat, Ben Cottrell, Eric King, David Arno, Thomas Owens Aug 14 at 13:26

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.