File tree Expand file tree Collapse file tree 1 file changed +41
-0
lines changed Expand file tree Collapse file tree 1 file changed +41
-0
lines changed Original file line number Diff line number Diff line change @@ -212,6 +212,47 @@ website user will get unexpected results. This section explains how CSS MQPacker
212
212
works and what you should keep in mind.
213
213
214
214
215
+ ### CSS Cascading Order
216
+
217
+ CSS MQPacker changes rulesets’ order. This means the processed CSS will have an
218
+ unexpected cascading order. For example:
219
+
220
+ ``` css
221
+ @media (min-width : 640px ) {
222
+ .foo {
223
+ width : 300px ;
224
+ }
225
+ }
226
+
227
+ .foo {
228
+ width : 400px ;
229
+ }
230
+ ```
231
+
232
+ Becomes:
233
+
234
+ ``` css
235
+ .foo {
236
+ width : 400px ;
237
+ }
238
+
239
+ @media (min-width : 640px ) {
240
+ .foo {
241
+ width : 300px ;
242
+ }
243
+ }
244
+ ```
245
+
246
+ ` .foo ` is always ` 400px ` in original CSS, but ` 300px ` if viewport is wider than
247
+ `640px' with processed CSS.
248
+
249
+ This does not occur on small project. On large project, however, this could
250
+ occur frequently. For example, if you want to override a CSS framework (like
251
+ Bootstrap) component declaration, your whole CSS code will be something similar
252
+ to above example. To avoid this problem, you should pack only CSS you write, and
253
+ then concaenate with a CSS framework.
254
+
255
+
215
256
### The "First Win" Algorithm
216
257
217
258
CSS MQPacker is implemented with the "first win" algorithm. This means:
You can’t perform that action at this time.
0 commit comments