kni-mq-style.md

1. Content should always dicate when to use a media query.

// an element that needs to break at exactly 540px
.item
  width: 100%
  
  @media(width >= 540px)
    width: 50%

However, there are few common breakpoints where a variable name can be used:

                                          768px→        1024px→        1280px→           
                   ──────────────────────────┬─────────────┬─────────────┬─────────────────────
                   
          No MQ:   ████████████████████████████████████████████████████████████████████████████
          
        --small:   ██████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
       --medium:   █████████████████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
        --large:   ███████████████████████████████████████████████████████░░░░░░░░░░░░░░░░░░░░░
        
  --above-small:   ├───────── Small ────────┤██████████████████████████████████████████████████
 --above-medium:   ├──────────────── Medium ───────────────┤███████████████████████████████████
  --above-large:   ├───────────────────────────── Large ─────────────────┤█████████████████████
        

For any other breakpoints, use a custom value.

2. Nest MQ directly on element:

🚫 no:

.foo
  @media(--above-small)
    h2
      margin-top: 20px

✅ yes:

.foo
  & h2
    @media(--above-small)
      margin-top: 20px

3. Mobile first:

🚫 No:

.foo
  & h2
    margin-top: 5%

    @media(width < 768px)
      margin-top: 20px

✅ Yes:

.foo
  & h2
    margin-top: 20px      

    @media(--above-small)
      margin-top: 5%

Non-mobile-only styles should be in media query:

.foo  
  @media(--above-small)
   padding: 5%

Mobile-only styles should be in a media query:

.foo
  @media(--small)
    margin-bottom: 10px

4. MQ order: after rules, before nested child elements:

.foo
 padding: 5%
 background: red

 @media(--above-medium)
   padding: 10%
   
 & h2
    font-size: 32px
    color: red
    padding: 5%
    
    @media(--above-l)
      padding: 10%