Hello.Earlier in the layout, I did this.There were two files.One for the styles, the second for media queries.I added the media requests to a regular file with styles at the end of the file and compressed through gulp.

The code has become more than 1000 lines in one project and therefore began to look for more convenient ways of layout.

Now I have found such a way.All the elements to beat on the files, ie the file for the buttons, the file for the slider, the file for the basement and so on.At the end of each file indicate the media requests. The second method seemed convenient to me, but is it correct to insert the same tags for media queries in each file or is it more correct to split everything into files, but to get rid of code duplication all media queries should be written as I did before in a single file?

Tell me how best to impose projects.Maybe you will advise other approaches in the development
  • Pravilno.Tak and to do. – Spirit96 May 14 '19 at 12:40
  • If you wish, you can use something like gulp-combine-mq in the assembly, this can slightly reduce the size of the output file. – Spirit96 May 14 '19 at 12:40
  • Spirit96, how is the second way? But will it not be a duplication of code that I need to adapt to each file? – Nostalgic Drug-Dealing May 14 '19 at 12:41
  • Nostalgic Drug-Dealing, Yes, the second.
    It will, but not essential.At the end of the day, this is https://www.npmjs.com/package/gulp -combine-mq can put together all the media queries in a build.
    – Spirit96 May 14 '19 at 12:42
  • Nostalgic Drug-Dealing, this is normal.You describe a specific component or block in each file and write your own media requests for it.For me, this is so logical. – Leisure95 May 14 '19 at 12:45
  • What hinders you in the file where you all import to put one request and import files into your media into this request.As an example, I can attach a template I use.https://github.com/lord-dantes/pug-scss-start_v2.0 – Mickey's53 May 14 '19 at 12:47
  • Nostalgic Drug-Dealing, I write media requests in the component file(SASS).But not at the end, but after each component element, because I use BEM and a @ at-root type #{$self} __el {...}.

    Then I integrate media requests with the help of some kind of plugin for Gulp.
    – Beautiful Baboon May 14 '19 at 12:52
  • for every block of course.
    convenient to parse your own code.
    convenient to stick together in two files for Google: the first screen + the rest.
    let the collectors do the rest, they are for this and invented.
    – Battlefield:77 May 16 '19 at 15:59

2 Answers 2

There is a gulp plugin that combines media requests.

https://www.npmjs.com/package/gulp-combine-media-q...
Tell me how best to lay out projects.Maybe you will advise other approaches in the development of
How better - depends on the specific case, but when I was working on the layout, it looked like this:
0.Using a preprocessor, some, for example SASS(SCSS)
1.Thanks to the preprocessor, among other things - you can split up the style files into an arbitrary number of them(although I would not do that)
2.CSS(with our approach) could be divided into the following parts:
  • File with basic(basic) styles(in some cases, it can be included in inline-form directly into the page header)
  • Additional styles file
  • File with general media queries(if necessary)
  • Files with media requests for each permission(each file is loaded depending on the resolution of the device)
  • File with theme(if any)


Regarding files with media queries, it looks like this in total: first, the layout is done in basic resolution(either mobile or desktop), and then general styles are written to adapt it, valid for all permissions, then written adjustment layer"for each separately taken permission(if necessary).

* The above is exclusively voiced by our approach to work, developed by us and for our projects, it is far from a fact that such an approach will suit you.

I also recommend that you familiarize yourself with the list of methodologies(from myself to this list I want to add the fact that the “fudge in HTML code” approach, creating elements without which it is easy to do, “violates the fundamental recommendations of CSS founders, therefore, in most cases, methodologies promoting this approach are not even considered by us).
  • I do not agree with how to write media expressions, it is much better when they are isolated from each other and EVERY element has its own rules for adapting to the screens. – All-Star91 May 14 '19 at 14:52
  • is much better when they are isolated from each other and EVERY element has its own rules for adapting to screens.

    All-Star91, frankly, I find it difficult to imagine how the implementation in which NOT EVERY element of the adaptation rule may look like...and how is it better?
    – Relieved Ratel May 14 '19 at 15:16
  • Relieved Ratel, I mean that it’s best to describe the adaptation of an element somewhere near it.Not in a separate file.Although maybe I did not understand you. – All-Star91 May 14 '19 at 15:19
  • All-Star91, we tried this way and that and that...as a result, in some cases we stopped on the version that I described above.Certainly, we have a number of specifics of the specifics of our work that greatly influenced this decision...but, I could not physically describe all the subtleties and details, so I simply described the author with a question - one of the possible options, without claiming the title of “best” or a solution of the “panacea” level. – Relieved Ratel May 14 '19 at 15:28