How is mobile first supposed to work with this?

[jochenstu]

Simple use case:

.wrapper { max-width: $page-max-width; @extend .p--; @extend .lap-and-up-p-; @extend .desk-p; margin: 0 auto; }

This doesn't work, because .lap-and-up-p- will trump .desk-p by source order.

The obvious way to fix this, that I can see, would require for the source to be sorted by (ascending) breakpoints instead of p-types and thus a major rewrite of the whole module.

Am I missing something here? Am I missusing the component? Any help would be appreciated.

[nenadjelovac]

Those classes were never meant to be extended. You should use them only in your markup (html) to build your component. Something like this:

<div class="wrapper  p--  lap-and-up-p-  desk-p">
  ...
</div>

But since your .wrapper class would probably be used more than once it's better to replicate what you need with inuit breakpoint mixin and inuit spacing variables. Maybe:

.wrapper {
    max-width: $page-max-width;
    padding: $inuit-base-spacing-unit--tiny;
    margin: 0 auto;

    @include media-query(desk) {
        padding: $inuit-base-spacing-unit;
    }

    @include media-query(lap-and-up) {
        padding: $inuit-base-spacing-unit--small;
    }
}

This doesn't work, because .lap-and-up-p- will trump .desk-p by source order.

Also, from technical side this wouldn't work because you can't extend (at the moment) from and out of @media scope in SASS. You'd get something like this:

You may not @extend an outer selector from within @media. 
You may only @extend selectors within the same directive.

Check this article about SASS extend for more info.

[jochenstu]

Thanks for your reply @nenadjelovac, much appreciated! The css replication certainly works (and I will probably chose that route).

Unfortunately moving the classes into the markup doesn't have any effect: The css source order still is the same. lap-and-up-p- will always trump desk-p by mere source order.

Regarding your last comment: From a technical side it would and it does work, since I am not extending from withing a media query.

[nenadjelovac]

@quakenul ah, now I see your point. Sorry I missed it, but that extend got into the way and I mistakenly focused (only) on that :) (while we're on the topic of extend please see this comment for some useful links).

And you are right, this is a bug and requires rewrite.

Regarding your last comment: From a technical side it would and it does work, since I am not extending from withing a media query.

Yes, sorry, my bad.

[nenadjelovac]

@quakenul On a second look, it doesn't really need a rewrite.

In your example you should use lap-p- not lap-and-up-p-. When you're using *-and-up it means it is applied from that breakpoint and to "infinite" viewport width. What you need is one behaviour for lap viewport and another one for desk (so no overlap there). Please check breakpoint settings for more context.

I hope this answers your question how this should work in mobile first approach. I'm sorry I haven't been fully focused to spot this earlier :)

[jochenstu]

You are absolutely right, that would definitely work. Thanks!

From a more philosophical standpoint, how do you feel about it though? To me, it's so elegant to work with only min-width queries (without max-width) whenever possible because of it being so implicit when working from small up. Anything you don't explicitly declare to switch up behavior will inherit it. Feels like css, feels like making the cascade work for you, you know?

Of course there's some cases where that doesn't work and in this cases it's good to have alternatives. Is this one of them or do you feel there's any merit to what I am saying?

[nenadjelovac]

I've been in many situations where I needed lap breakpoint, especially when working with .layout object.

To me, it's so elegant to work with only min-width queries (without max-width) [...] Feels like css, feels like making the cascade work for you, you know?

You need to tame cascade since it is your friend only if you tame it ;) Otherwise it can be a dangerous beast :) Check links^[1][2] at the bottom of this post for more info.

So, while it might look more elegant to work with only min-width you should really use all the tools you can when working with responsive design.

Rulesets should only ever inherit and add to previous ones, never undo.

The above is a great quote from "Mobile first css" article that explains why you should not use overlapping media queries (eg. min-width only). The whole article is insightful so give it a read.

---

1. this video to learn more about how to do it. I know it's a bit longer but it's worth it. Also, there is no docs for itcss so that's the only link I know of that I can share with you at the moment :)
2. Maybe you can read this article for more insights about the topic of taming cascade.

[nenadjelovac]

@quakenul hey, here's link to ITCSS slides from the video.

[jochenstu]

Fair enough, thanks again! :)

[nenadjelovac]

@quakenul no problem :)