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
There is a gulp plugin that combines media requests.
Tell me how best to lay out projects.Maybe you will advise other approaches in the development ofHow 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).