An abstract best practices question about responsive site design, one some what akin to asking where is left and where is right.

* Which direction to you favour? In other words do you THINK "up to a a certain size" , "below a certain size" , "between a certain size"( tho personally I have found this one to end up rather convoluted )

* How do you represent that in media query logic so as to have as few conflicts as possible?


Let me give you an example of what I usually do , maybe some can learn from it but I would love pointers as to how to improve, streamline and make "readable".

Lets say you have selection of break points, feel free to substitute any values I am just indicating that there would be 6 states... one of which would be 'X to infinty'.

* if the site is smaller than 361px ( or I guess you could also say up to 360px)
* from 361px to 480px
* from 481px to 640px
* from 641px to 800px
* from 801px to 960px
* greater than 960px

first things first. I have always worked with the idea that, in media queries:
* you represent smaller than with 'max-width' as in: @media screen and (max-width: 360px ){ ...}
* and greater than with 'min-width'


I also have to take the cascade into account. I suppose this is the part i sort of visualize but am struggling with. I try to order my rules in a specific direction , usually counter to the inequality. That is , if i am using less than rules, I arrange my queries with the smallest dimensions first. and vice versa. Thus employing the override/cascade.


eg.:

general rules {}
@media screen and (max-width: 360px ){ ...}
@media screen and (min-width: 361px ){ ...}
@media screen and (min-width: 481px ){ ...} /* greater than 481 px, inherits/overrides 361 */
@media screen and (min-width: 641px ){ ...}/* greater than 640 px, inherits/overrides 361,481 */
@media screen and (min-width: 801px ){ ...}/* greater than 800 px, inherits/overrides 641,481,361, */
@media screen and (min-width: 961px ){ ...}/* greater than 960 px, inherits/overrides 801, 641,481,361, */

this is because at a screen size of say 650px, (min-width: 361px ),(min-width: 481px ) AND (min-width: 641px ) would ALL be TRUE. So if all rules from the 481{} would be inherited , and I can override whatever I want changed in the 641 {}. TWO PET PEEVES:
1) I need that 361 rule to account for the screen sizes >360<480. (not having a max-width query would leave 0-360 unstyled execpt for the general rules... I suppose that 'mobile first' thinking, but that also bugs me. So that break point requires TWO media quires... ugh!
2) Because of that I often have to repeat stuff from the max-width.

the alternate approach:
is 100% mobile firs

general rules {}/*for smallest width devices*/
@media screen and (max-width: 800px ){ ...}/* 800px and up */
@media screen and (max-width: 640px ){ ...}/* 640px and up, inherits/overrides 800 */
@media screen and (max-width: 480px ){ ...} /*480px and up, inherits/overrides 800 , 600 */
@media screen and (max-width: 360px ){ ...}/*480px and up, inherits/overrides 800 , 600, 360 */
@media screen and (min-width: 960px ){ ...}/* 960px and up, ALL previous rules must be overridden */

of course now the inheritance logic reversed and it almost gives you a head ache. And by the time you get to the min-width 960, you are mostly overriding rules rather than adding them ( this works fine if you didnt do much styling for the smaller screen sizes , but seems repetitive and makes it a pain to debug otherwise)


So what would be your break point strategy? What can I change it to make my code arrangement more intuitive/easier to grasp?