Your project structure for the layout?

0 like 0 dislike
7 views
Good evening! The questions that I want to hear the answer marked "In".
Q: What is for you the component and what is not?
For example here is my structure of komponentov:
5ae47126cfd85117135947.jpeg

Bread crumbs, pagination, buttons - all components clear itself.
Q: But are such units as the logo, header, footer components?

For example cap contains the standard elements such as logo, menu, language switcher, social networks, hamburger and so on
Q: hats will be a separate folder header/header.scss, the things listed above is its elements or each is a separate unit? why I created header.scss because in every website hat has its own color, its own shade and so on.

Q: are the header, footer, side bar components?
by | 7 views

5 Answers

0 like 0 dislike
Let's see how the developers React to interpret the principle of single responsibility (single responsibility principle). For a start there's a Council to divide the layout into rectangles and generally ask the designer names, it is likely they already have. Either proceed from the data model, and for every little part in the logical view must be a component.
\rhttps://reactjs.org/docs/thinking-in-react.html
My answer - if you can come up with a logical component name, then you need to make. So you came up with: header, footer, logical names, to pass safely! This means semantically is already the principle of a single responsibility.
by
0 like 0 dislike
Each selector in a separate file.
In addition to the auxiliary, like .text-right, all of them in one _helpers.scss.
Grid classes separately, etc.
Folders prefer a more neutral name — blocks/
And components/ blocks with javascript binding.
In General, something like this:

directory tree:
SOURCE\\SASS │ styles.scss │ ├───base │ _buttons.scss │ _form-control.scss │ _grid.scss │ _helpers.scss │ _images.scss │ _init.scss │ _inputs.scss │ _layout.scss │ _normalize.scss │ _tables.scss │ _type.scss │ _webfonts.scss │ ├───blocks │ _accordion.scss │ _anchor-nav.scss │ _announces.scss │ _arrows.scss │ _article-photo.scss │ _article.scss │ _ask-form.scss │ _b1.scss │ _b2.scss │ _breadcrumbs.scss │ _cards.scss │ _carousel-docs.scss │ _carousel-teachers.scss │ _class-logo.scss │ _class-teacher.scss │ _class.scss Connection. _close.scss │ _contact-map.scss │ _course-cards.scss │ _course-filter.scss │ _course-info.scss │ _course-list.scss │ _course-side.scss │ _course-stream.scss │ _course.scss │ _courses.scss │ _diplomas.scss │ _doc.scss │ _documents.scss │ _dropdown.scss │ _facts.scss │ _feedback-card.scss │ _feedback-item.scss │ _feedback-list.scss │ _feedback-page.scss │ _feedback.scss │ _footer.scss │ _form-status.scss │ _gallery.scss │ _hamburger.scss │ _header.scss │ _hmenu.scss │ _iconbox.scss │ _icons.scss │ _images carousel.scss │ _important-courses.scss │ _license.scss │ _loader.scss │ _logo.scss │ _menu.scss │ _nav.scss │ _navbar.scss │ _news-announce.scss │ _news-card.scss │ _news-list.scss │ _news.scss │ _page-header.scss │ _partners.scss │ _photoset.scss │ _program-course.scss │ _program.scss │ _reg-course.scss │ _reg-courses.scss │ _reg-form.scss │ _resume.scss │ _review.scss │ _reviews-all-link.scss │ _search.scss │ _side-menu.scss │ _slider.scss │ _soc-icons.scss │ _split-heading.scss │ _spoiler.scss │ _students.scss │ _truncated-text.scss │ _video.scss │ _white-table.scss │ ├───components │ _fixed-bar.scss │ _modal.scss │ _yandex-map.scss │ ├───config │ _colors.scss │ _grid-system.scss │ _rhythm.scss │ _variables.scss │ └───mixins _misc.scss _type.scss
by
0 like 0 dislike
the header, footer, sidebar - are certainly components.
logo, menu, language switcher, social networks, hamburger:
logo - Yes menu - Yes,
the language switch is not required, but if this code block takes a lot of space, you can make a separate component
SOC.network - usually Yes. Because usually social.network where a lot of the site uses,
hamburger - probably not worth it because: 1) is an integral part of the cap, 2) don't take up much space.
If desired, small pieces of the type of Burger you can make a subcomponent, if the build system allows.

So what is a component:
1) independent unit - part code used independently from the parent, can be used in different places
2) big block - big chunk of code that has a specific purpose, the type of banner, slider, etc. Let it never and never more used, except on the main, but he's a big and independent boy. So settle separately.

Here at least two distinctive features of components from componentb.

Oh, I something about marking all said =))

About styles - as said above, all you need to separate. Well, if each css file will contain the layout of only one logical block.

PySy: looking at your screenshot, it seems that the folder for these files is not needed. The point in such long and repetitive ways?! components/header/header.scss Yes no
by
0 like 0 dislike
What is for you the component and what is not?


Because logically detachable unit that serves for one purpose
Everything can be broken down into components, the only question is the appropriateness. For example, if you have a list of items and these items represented only one tag with a couple of style classes, then you can not bother having them in separate ItemComponent.

But are such units as the logo, header, footer components?

The response above. Although it may be too subjective, but in practice it makes no sense to make every couple of tags in a single component. Required only when the parent component will grow.
For example, write on Vue.js + Pug + Sass and try to make components only when the template or styles will take more than 60-100 lines

In:

Yes, just another question is whether the nested components unique to the current? If so, it makes sense to put them in a directory with the current. Otherwise, they can be used by other components

In:

Yes
by
0 like 0 dislike
What is for you the component and what is not?

Any logically independent entity - component.

Your project structure for the layout?

Usually makes a structure like that:
spoiler
src/less ├── animations.less (universal animation like fade-in) ├── colors.less (color scheme: constants + helper classes) ├── components (all the components here, lots of it) │ ├── accordion.less │ ├── badge.less │ ├── blockquote.less │ ├── breadcrumb.less │ ├── button-dropdown.less │ ├── button-group.less │ ├── button.less │ ├── card.less │ ├── carousel.less (complex components can be internal components that are not used elsewhere, accordingly, they are in the same file with the parent) │ ├── checkbox.less │ ├── grid.less (Yes, a grid is also a component) │ ├── . . . . etc. ├── constants.less (constants, it is something like a global config) ├── fonts.less (everything to do with typography) ├── helpers.less (helper classes with hecklers styles) ├── main.less (here everything is imported in the correct order) ├── normalize-ext.less (an extension of the standard normalize.css) └── utils.less (mixins, they are usually quite small. all hacks and fixes adds PostCSS, so here they are not)

Next to this are the scripts (the structure for the usual no-spa). These files are created as needed - it may well be that all in one or two files and, if done landing some:
src/js ├── component.js (if the components are many - they are inherited from the base component. uniformity is important.) ├── components │ ├── . . . . there are components themselves, are called similarly to their *.less files ├── components.js (index for components) ├── controls │ ├── . . . . there may be (or may not) be the utility-wrapper for the keyboard/touchpad; it sometimes allows much to unload the rest of the code. ├── dependencies.js (wrap adapters for dependencies) ├── events.js (sledili events) ├── factory.js (little factory components) ├── main.js ├── polyfills.js (wrap adapters for polifilo) ├── store.js (the minimum storage that sometimes is a wrapper for some third-party solutions) ├── utils │ ├── . . . . (there can be files with different otitidae, sometimes none at all) └── utils.js (if files with many utilities, this file is an index for them)
by

Related questions

0 like 0 dislike
1 answer
asked May 22, 2019 by Hank_Moody
0 like 0 dislike
3 answers
0 like 0 dislike
2 answers
asked May 21, 2019 by taurus2790
0 like 0 dislike
1 answer
asked Apr 26, 2019 by colorkid
0 like 0 dislike
2 answers
110,608 questions
257,186 answers
0 comments
33,570 users