Hello, I am going to develop a large city web project, with a lot of functionality, but at the first stage I will only do the layout. Please advise how to distribute files of JS css, etc., how best to divide styles into libraries, etc. The main task is to make it easy to replace everything as modules. There are articles about this please write.

Closed due to the fact that the question is too general for the participants user207618, rjhdby , Vladimir Gamalyan , Vadizar , Sasha Omelchenko 10 Mar '17 at 12:52 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • There will definitely be a mobile version, cross-browser compatibility, and a normal display on all screens - polopolaw
  • one
    If the question is more related to the layout, then your ability to typeset plays a greater role than the order and distribution of connection styles. If you do not have your own developed approach, then the question of how to connect styles can be considered meaningless. - mJeevas
  • one
    To solve the main problem - modularity - it is best not to reinvent the wheel and take Bootstrap 3 getbootstrap.com . Due to the popularity of this framework, you can find answers to almost all questions that arise when working with it. - labris
  • one
    Regarding the layout - you should get acquainted with Bam: frontender.info/MindBEMding - Duck Learns to Take Cover

1 answer 1

In this article there are examples of different approaches (architectures), with their advantages and disadvantages, on the placement of css (in the original scss), js and other files in the project.

Examples of architectures from the article:

Functional distribution

Distribute functionality to individual files.

_mixins.scss _variables.scss

Katana distribution

Divide the pages into parts and designate styles for each part individually.

 /base /sections _header.scss _content.scss _footer.scss _sidebar.scss _modals.scss /menu _left.scss _right.scss _top.scss _bottom.scss

Template or pagination

 /base /templates _category.scss _footer.scss _header.scss _index.scss _page.scss _single.scss

In terms of web design

As the name suggests, it is designed for web designers. Do not use folders.

 _normalize.scss _buttons.scss _footer.scss _grid.scss _header.scss _icons.scss _navigation.scss _typography.scss screen.scss

And so on ... This may push you into thinking about your architecture.