I think the ultimate thing to remember is that the Theme Unit Tests are *front end* tests. If the Theme&#39;s code properly renders the Theme Unit Tests, the Theme passes, regardless of whether that code could be more efficient or not. The example code is the Codex is there because it is known to render output that passes the Theme Unit Tests. It isn&#39;t guaranteed to be the best or most efficient such code; but rather merely *working* code.<div>
<br></div><div>Improvements to any example code are always welcomed. But we also want to ensure that we don&#39;t cross the line into bikeshedding. </div><div><br></div><div>Chip</div><div><br><div class="gmail_quote">On Thu, Jul 19, 2012 at 5:24 PM, Emil Uzelac <span dir="ltr">&lt;<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>&gt;</span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><font color="#333333"><font><font face="arial,helvetica,sans-serif">Hey Bill,</font></font></font><div><font color="#333333" face="arial, helvetica, sans-serif"><br>
</font></div><div><font color="#333333" face="arial, helvetica, sans-serif">It&#39;s all good. I am not saying that it might not be the same, but it still needs to be tested on WordPress :) And since you just removed stuff... </font></div>


<div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Anyways I did test this on WordPress and screenshots are here: <a href="http://imgur.com/a/Drymw" target="_blank">http://imgur.com/a/Drymw</a> first image is FF and below that you&#39;ll see IE8 and IE9. See everything is there for a reason, no need to remove or anything at this point, unless we have a real improvement and because they all work just fine. I&#39;ve used my Theme for this test, remove all WP generated classes and added just what you&#39;ve proposed.</font></div>


<div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif">BTW Twenty Twelve has some major improvements :)</font></div><div><font color="#333333" face="arial, helvetica, sans-serif"><br>


</font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Thanks,</font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Emil<br>
</font><div><div class="h5"><div><br><div class="gmail_quote">On Thu, Jul 19, 2012 at 4:47 PM, William Ludwig <span dir="ltr">&lt;<a href="mailto:weludwig@gmail.com" target="_blank">weludwig@gmail.com</a>&gt;</span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">


Emil,<div><div><br></div><div>&quot;<span style="color:rgb(51,51,51);font-family:arial,helvetica,sans-serif">however the styles are WordPress generated, therefore it should be within WordPress :)&quot;</span></div>
<div><span style="color:rgb(51,51,51);font-family:arial,helvetica,sans-serif"><br>
</span></div></div><div>I&#39;m not trying to be difficult here but I really don&#39;t see the distinction.  The HTML I tested with was from the theme unit test, whether or not Wordpress is actually involved in the generation of that HTML every single time is irrelevant to the test and makes no difference to how the CSS works.</div>




<div><br></div><div>For example here is a JSFiddle with the same HTML/CSS and it works the same <a href="http://jsfiddle.net/BillLudwig/FKYY4/1/" target="_blank">http://jsfiddle.net/BillLudwig/FKYY4/1/</a></div><div><br>



</div><div>However, since I&#39;m new and I don&#39;t want to appear uncooperative here it is ... <a href="http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/css-test-for-emil.jpg" target="_blank">http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/css-test-for-emil.jpg</a> and live <a href="http://wp-themedev.ludwigdevelopment.com/uncategorized/images-test/" target="_blank">http://wp-themedev.ludwigdevelopment.com/uncategorized/images-test/</a></div>




<div><br></div><div>I won&#39;t leave it up long because I have work to do on this server so I&#39;ll be taking the live version down shortly.</div><div><br></div><div>Bill</div><div><div><div><br>
</div><div><br><div class="gmail_quote">
On Thu, Jul 19, 2012 at 4:01 PM, Emil Uzelac <span dir="ltr">&lt;<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>&gt;</span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">




<font color="#333333"><font><font face="arial,helvetica,sans-serif">I understand what you are trying to do an that&#39;s very much appreciated, however the styles are WordPress generated, therefore it should be within WordPress :) Here&#39;s that in action </font></font></font><font color="#333333" face="arial, helvetica, sans-serif"><a href="http://themeid.com/demo/responsive/2008/09/03/images-test/" target="_blank">http://themeid.com/demo/responsive/2008/09/03/images-test/</a></font><span><font color="#888888"><div>






<font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div></font></span><div><span><font color="#888888"><font color="#333333"><font><font face="arial,helvetica,sans-serif">Emil<br>




</font></font></font></font></span><div><div><br><div class="gmail_quote">

On Thu, Jul 19, 2012 at 3:54 PM, William Ludwig <span dir="ltr">&lt;<a href="mailto:weludwig@gmail.com" target="_blank">weludwig@gmail.com</a>&gt;</span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">






Emil,<div><br></div><div>The HTML I used was from the Theme Unit Test.  I don&#39;t know why a wordpress install would be required to view CSS/HTML.</div><div><br></div><div>If you look the image overflow is present with the original CSS as well. My intent was to clean up the code but keep the same appearance and functionality.  Adding a max-width to the images is trivial enough but really this wouldn&#39;t be the place in the stylesheet to do it.  You would want your responsive media handling to be more robust than just handling images which kind of takes it out of scope for the snippet I created.</div>







<div><br></div><div>Bill</div><div><div><br><div class="gmail_quote">On Thu, Jul 19, 2012 at 3:15 PM, Emil Uzelac <span dir="ltr">&lt;<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>&gt;</span> wrote:<br>






<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<font color="#333333"><font><font face="arial,helvetica,sans-serif">William,</font></font></font><div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Thanks but the tests are not complete without <a href="http://codex.wordpress.org/Theme_Unit_Test" target="_blank">http://codex.wordpress.org/Theme_Unit_Test</a> and there must be WordPress install, not just basic HTML. Please take a look to several screenshots I made for you <a href="http://imgur.com/a/iS16K" target="_blank">http://imgur.com/a/iS16K</a> and scroll down to see the image overflows. </font></font></font></div>









<div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Thanks,</font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Emil<br>









</font></font></font><div><div><br><div class="gmail_quote">On Thu, Jul 19, 2012 at 2:13 PM, Laird Sapir <span dir="ltr">&lt;<a href="mailto:laird@memphismckay.com" target="_blank">laird@memphismckay.com</a>&gt;</span> wrote:<br>







<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">



<div bgcolor="#FFFFFF" text="#000000">Nicely done, William!!!<div><div><br>
<br>
Shinra Web Holdings wrote:
<blockquote type="cite">I approve of this message.<br>
  <br>
  <div class="gmail_quote">On Thu, Jul 19, 2012 at 8:39 AM, William 
Ludwig <span dir="ltr">&lt;<a href="mailto:weludwig@gmail.com" target="_blank">weludwig@gmail.com</a>&gt;</span>
 wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div>Yesterday in another thread i 
mentioned that the sample CSS at <a href="http://codex.wordpress.org/CSS#WordPress_Generated_Classes" target="_blank">http://codex.wordpress.org/CSS#WordPress_Generated_Classes</a>
 was ineffecient and redundant.  Emil challenged me to produce something
 better so I wanted to run it past this group before I submitted it. 
 After all you guys are the ones that would be seeing it on submitted 
themes.</div>

<div><br></div><div>My goal in writing this CSS was to make it 
accessable to newer developers, remove repetitive rules, and reduce 
selector complexity.  Visually the new CSS appears the same as the old 
CSS (one exception-explained below), but it&#39;s half the size and should 
be easier to manage.</div>

<div><br></div><div>Thanks for reading this, sorry it&#39;s so long.</div><div><br></div><div><br></div><div>My
 tests are here, CSS is in the header to make it easier to view.  HTML 
is identical.</div><div><br></div><div>

Original ... <a href="http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/new.html" target="_blank">http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/new.html</a></div><div>New
 ... <a href="http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/original.html" target="_blank">http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/original.html</a></div>

<div><br></div><div><br></div><div>Here is a breakdown what I changed 
and why.</div><div><br></div><div>.alignnone - added display: 
inline-block so that when .alignnone is applied to either a div or an 
image it will display the same.  This is kind of a judgement call on my 
part but I feel that image layout should be consistant whether or not 
there is a caption.</div>

<div><br></div><div>div.aligncenter - removed as unnecessary because the
 first selector will already catch any divs with .aligncenter.</div><div><br></div><div>a.img.alignright,
 a img.alignnone, a img.alignleft, a img.aligncenter - removed, 
duplicates of the base alignment class with more complicated selector.</div>

<div><br></div><div>.wp-caption.alignnone, .wp-caption.alignleft, 
.wp-caption.alignright - removed, duplicates of the base alignment class
 with more complicated selector.</div><div><br></div><div>.wp-caption 
p.wp-caption-text - Changed selector to just .wp-caption-text.  No need 
to complicate it.  It really shouldn&#39;t show up outside of a .wp-caption 
and if it does someone had to of put it there on purpose and they can 
deal with it.</div>

<div><br></div><div><br></div><div>Final CSS</div><div><br></div><div>/*
 =WordPress Core</div><div>--------------------------------------------------------------
 */</div><div>.alignnone {</div><div>    display: inline-block;</div>

<div>    margin: 5px 20px 20px 0;</div><div>}</div><div><br></div><div>.alignright
 {</div><div>    float:right;</div><div>    margin: 5px 0 20px 20px;</div><div>}</div><div><br></div><div>.alignleft
 {</div><div>    float: left;</div>

<div>    margin: 5px 20px 20px 0;</div><div>}</div><div><br></div><div>.aligncenter
 {</div><div>    display: block;</div><div>    margin: 5px auto;</div><div>}</div><div><br></div><div>.wp-caption
 {</div><div>    background: #fff;</div>

<div>    border: 1px solid #f0f0f0;</div><div>    max-width: 96%; /* 
Image does not overflow the content area */</div><div>    padding: 5px 
3px 10px;</div><div>    text-align: center;</div><div>}</div><div><br></div><div>

.wp-caption img {</div><div>    border: 0 none;</div><div>    height: 
auto;</div><div>    margin: 0;</div><div>    max-width: 98.5%;</div><div> 
   padding: 0;</div><div>    width: auto;</div><div>}</div><div><br></div><div>

.wp-caption-text {</div><div>    font-size: 11px;</div><div>    
line-height: 17px;</div><div>    margin: 0;</div><div>    padding: 0 4px
 5px;</div><div>}</div><div><br></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div>
  <br>


  <pre>_______________________________________________
theme-reviewers mailing list
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a>
</pre>
</blockquote>
</div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br>
</div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div>
</div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div>