css – Bootstrap mobile first和媒体查询分组

我正在为项目使用最新的bootstrap.我对bootstraps移动第一个approch和较少的文件结构感到困惑

我的文件结构是

---css
---js
---less
---mixins
-----..
-----...
----Custom_files
---------main.less
--------- component1.less
--------- component2.less

我的所有自定义文件都存在于自定义文件文件夹中我试图为自定义css生成不同的样式表,而不触及bootstrap.min.css

在main.less文件中,我导入了所有组件较少的文件(component1.less,components.less)

为了实现移动第一个approch,在每个组件文件中我都将移动样式作为默认样式规则和文件最后的桌面样式包含在内

/****Default Styles go here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

我的问题是当生成css时,它看起来像一个混乱的默认css和媒体查询的组合,而不是先有默认的CSS,然后是媒体查询

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/
......

这个可以吗？或者,如果它是错的,那么正确的做法是什么

解决方法

根据@mdo(bootstrap的创建者)编写的样式代码指南,http://codeguide.co/#css-media-queries媒体查询应该“尽可能接近相关规则集”