The Magento 2.0 system works with the LESS CSS preprocessor to extend the features of CSS and enable the opportunity to create theme inheritance with minimal and organized effort. With this premise, to help theme developers, we have the Magento UI library in Magento 2.0.

The Magento UI library is based on LESS and provides a set of components to develop themes and frontend solutions:

Another important resource of the Magento UI and of LESS is the mixin capability. The mixin allows developers to group style rules to work with different devices.

For example, consider that you declared the following CSS code in one determined file:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ffc;
    }
    .example-responsive-block:before {
        content: 'Mobile styles ';
        font-weight: bold;
    }
}

Then, you executed this CSS code in a different file:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ccf;
    }
    .example-responsive-block:before {
        content: 'Desktop styles ';
        font-weight: bold;
    }
}

In spite of the two files declaring a mixin named .media-width to the .example-responsive-block class in different files, the mixin allows LESS to make a single query, grouping the rules instead of making multiple calls according to the device rule applied.

You can access the local Magento UI documentation by accessing the URL http://<magento_local_url>/pub/static/frontend/Magento/blank/en_US/css/docs/responsive.html.