How to structure css using BEM methodology for adaptive web pages?
<p>It is easy to use BEM for fixed layouts. What is about css styles structure for adaptive web pages with media queries? </p>

<p>html sample:</p>

<pre><code>&lt;div class="t-news"&gt;
    &lt;div class="t-news__post b-post"&gt;
        &lt;div class="b-post__title"&gt;&lt;/div&gt;
        &lt;div class="b-post__text--green"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="t-news__post b-post--small"&gt;
        &lt;div class="b-post__title"&gt;&lt;/div&gt;
        &lt;div class="b-post__text--red"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>less sample:</p>

<pre><code>.t-news {
     &amp;__post {
         //some styles
     }
}
.b-post {
     &amp;__title {
         //some styles
     }
     &amp;__text {
         //some styles

         &amp;--red {
              //some styles
         }
         &amp;--green {
              //some styles
         }
     }

     &amp;--small {
         //some styles
     }
}
</code></pre>

<ul>
<li>.t-news - page template. It is a block that defines position of blocks inside. </li>
<li>.b-post - BEM block </li>
<li>.b-post__title - BEM element of b-post </li>
<li>.b-post__text--red - BEM modifier of b-post__text of b-post</li>
</ul>

<p>Should I put media queries inside or outside my blocks?</p>