UI element names and hierarchy for web SaaS B2B application [closed]

Question

I´m building an ReactJS based library of web elements for a SaaS B2B application. I know this is common, but I´m having lots of difficulties choosing right names for my visual hierarchy. What I call Content two days later I refactor to Section, that later turns to Panel and at the end comes back as being Content again.

I know this is not a rule, but is there any best practice to organize the layout names ?

This is what I´m planning to use :

Page is the root, that represent the web page.

Pages has Sections (parts of the page) and Modals (will pop up over the page)

Sections may have Tabs, that has Panels. Modals can only have Panels.

A Panel may contain different components (lists, accordions, etc.), Sheets (that coitains data description), Graphs (plots of graphics) and DataTables (grids of data).

So, my hierarchy of layout components would be something like:

Page
  |
  | -- Modal 
  |      |----- Panel
  |               |------ Sheet
  |               |------ Graph
  |               |------ DataTable
  |
  |-- Section
           |----- Tab
                   |--- Panel
                           |------ Sheet
                           |------ Graph
                           |------ DataTable

So, Is this a correct approach to layout ?

Is there any standard we should try to follow ?

Are there better used names for the components above ?

Thanks for helping. I'm a programmer, not an UI designer. In fact I´m not even styling the pages, but I need to choose the correct name and hierarchy for the components otherwise the application will suffer in the future.

PS: I´m not using any graphical framework or library. A later job will be to style these components accordingly and creating a custom library.

Answer 1

Atomic Design

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates, Pages

I think this methodology will help you, you should read it and adapt it to your needs.

http://bradfrost.com/blog/post/atomic-web-design/

I can also recommend you the book he wrote.