Skip to content

Commit 02b0d62

Browse files
committed
Add CSS Cascading Order section
1 parent e6ac77d commit 02b0d62

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,47 @@ website user will get unexpected results. This section explains how CSS MQPacker
212212
works and what you should keep in mind.
213213

214214

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+
215256
### The "First Win" Algorithm
216257

217258
CSS MQPacker is implemented with the "first win" algorithm. This means:

0 commit comments

Comments
 (0)