Is my current way to create a new Magento2 theme the correct method?

Question

I have to create new theme that looks the default Magento Blank theme (other colors, other font). That's why I created a new theme with 1 file less css/source/_theme.less.

This file _theme.less looks like:

// first overwrite all variables    
@font-family__base: "Times";
  // @etc.

    // mobile first
    body {
      background-color: green;
      font-family: @font-family__base;
    }

    // desktop
    @media only screen and (min-width: 768px) {
      body {
        background-color: red;
      }

    }

Technical it works, but it looks not nice :(

In addition, I often have to "!important" many rules, to overrule the Blank Theme, and I hate important-rules.

What is the most correct way to create a proper responsive theme (as tiny as possible)?

Answer 1

In css/source/_theme.less override all your variables.

Put your rules in different .less files (override the ones in your parent theme or create your own).

Your sample code might be improved in this way:

Mobile and small screen:

  & when (@media-common = true) {
       body {
          background-color: green;
          font-family: @font-family__base;
        }
    }

Desktop:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
   body {
     background-color: red;
   }       
}

Override the @screen__m with the value of your breakpoint. The question is a bit long, take a look at the documentation