引导移动第一和媒体查询分组

Question

我正在使用最新的引导为一个项目。我感到困惑的白手起家移动第一计算策略和更少的文件结构

我的文件structurte是

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

我所有的自定义文件少活在自定义文件的文件夹。我想为自定义CSS不同的样式表，而完全不

在main.less文件我已经进口的所有成分少的文件（component1.less，components.less）

触摸bootstrap.min.css

为了实现移动首先计算策略，在每个组件文件我已经包括移动样式，默认样式规则和桌面风格在最后文件的

/****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)***/ 
.... 
/**************************************/ 
...... 

可以吗？或者，如果它是错的是什么做的部份

Answer 1

据@mdo（引导程序的创建者）编写的风格codeguide http://codeguide.co/#css-media-queries媒体查询应该是“接近他们的相关规则集尽可能”

的正确方法

Answer 2

我认为这个问题的答案应该取决于你对它的看法。当你是一名开发人员并且希望编写可重用代码时，你应该同意@ mdo的规则的确的原因：

这样做只会让人们更容易在将来错过它们。

但是，当您是用户（浏览器）时，您希望样式表尽可能快地呈现。使用许多（相同的）媒体查询而不对其进行分组会使您的CSS代码更长，并且（理论上）渲染速度更慢。是的，的确，人们认为这并不重要（Is there an advantage in grouping css media queries together?），并且在压缩时大码变小（Merging media queries, using SASS and Breakpoint (Respond-To)）。

将两个视图放在一起可以在编写代码时使用@ mdo的规则，并在编译代码后运行post processor to group your media queries。当你学习Bootstrap's grid Less code更详细地你会发现，grid.less

PS包含以下代码：

@media (min-width: @screen-sm-min) { 
    .make-grid(sm); 
} 

当你不关心分组媒体查询.make-grid(sm);也可以遍历.make-sm-column()混入在mixins/grid.less其中如下所示，而不是使用复杂的循环来构建网格类：

// Generate the small columns 
.make-sm-column(@columns; @gutter: @grid-gutter-width) { 
    position: relative; 
    min-height: 1px; 
    padding-left: (@gutter/2); 
    padding-right: (@gutter/2); 

    @media (min-width: @screen-sm-min) { 
    float: left; 
    width: percentage((@columns/@grid-columns)); 
    } 
}