<font color="#333333"><font><font face="arial,helvetica,sans-serif">And to add and possibly finish this up: <a href="http://www.websiteoptimization.com/secrets/web-page/replace-inline-style.html">http://www.websiteoptimization.com/secrets/web-page/replace-inline-style.html</a> was published in <a href="http://www.amazon.com/dp/0596515081/?tag=websiteoptimi-20">http://www.amazon.com/dp/0596515081/?tag=websiteoptimi-20</a> as well ;) Do we need to continue our "discussion" ? ;)</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,</font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Emil<br>
</font></font></font><br><div class="gmail_quote">On Fri, May 4, 2012 at 2:27 AM, Emil Uzelac <span dir="ltr"><<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>></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">Not at all, inline stylesheet is also know as style embedding big difference. Inline stylesheet is wrapped in <style> while inline CSS is directly in DIV. So no I haven't confused these two. </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">Inline stylesheet is being used by WordPress itself and that doesn't cause any issues or at least not to my knowledge:</font></font></font><div>
<font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif"><style type='text/css'>#gallery-1 {margin: auto;}#gallery-1 .gallery-item {float: left;margin-top: 10px;text-align: center;width: 33%;}#gallery-1 img {border: 2px solid #cfcfcf;}#gallery-1 .gallery-caption {margin-left: 0;}</style></font></div>
<div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif">And if this <i>hypothetically speaking</i> is making some "problems" <b>and to outline it does not</b> user can easily override via functions.php</font></div>
<div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif"><div>/**</div><div> * This function removes inline styles set by WordPress gallery.</div>
<div> */</div><div>function responsive_remove_gallery_css($css) {</div><div> return preg_replace("#<style type='text/css'>(.*?)</style>#s", '', $css);</div><div>}</div><div><br></div>
<div>add_filter('gallery_style', 'responsive_remove_gallery_css');</div><div><br></div><div>and add the elements in style.css</div><div><br></div><div>Can you do that with <div style="background:#000">? Nope I don't think so. And just to get something clear and out there (in case that someone brings this up) you can override inline style as well, but not as easily, however you cannot override some or all* pseudo elements (classes)</div>
<div><br></div><div>We're WordPress and this is not the best example but... <a href="http://drupal.org/node/81835" target="_blank">http://drupal.org/node/81835</a> this was in 2006 so even back than it was very important. (<i>just so that you don't pull my arm again</i>) this is similar and not the same what we're discussing here. But we can go there as well: <a href="http://answers.oreilly.com/topic/497-replace-inline-style-with-css-rules-to-speed-up-web-pages/" target="_blank">http://answers.oreilly.com/topic/497-replace-inline-style-with-css-rules-to-speed-up-web-pages/</a></div>
<div><br></div><div>@Konstantin, just like @Chip said once, we cannot have everything in Theme Review guidelines, some will simply imply :) </div></font><span class="HOEnZb"><font color="#888888"><div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br>
</font></font></font></div></font></span><div><span class="HOEnZb"><font color="#888888"><font color="#333333"><font><font face="arial,helvetica,sans-serif">Emil<br></font></font></font></font></span><div><div class="h5">
<br><div class="gmail_quote">On Fri, May 4, 2012 at 1:59 AM, Konstantin Obenland <span dir="ltr"><<a href="mailto:konstantin@obenland.it" target="_blank">konstantin@obenland.it</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word">Good morning everyone!<div><br></div><div>hm, there are quite a few issues to discuss here:</div>
<div><br></div><div><ul><li>Inline styles, yes/no:<br>I'm with Emil here, I'd love to see cleaner template file. Adding inline js or css should always be avoided where possible. I'm sure there can be exceptions to the rule when asked (as there has been for other requirements), but generally developers should strive for a separation of CSS/JS and HTML.<br>
<br></li><li><span style="color:rgb(51,51,51);font-family:arial,helvetica,sans-serif">catching some of the obvious "issues":<br>This brings me back to two emails I wrote concerning the "findability" of requirements, where I unfortunately did not receive a response:<br>
</span><span style="color:rgb(51,51,51)"><pre><font face="Arial"><i>I'm still pretty green as a reviewer, and in the beginning I found it confusing that I had to look all over the place to make sure I have all requirements in check, when reviewing. I still have like four reference tabs open when I review a Theme:
Theme Review Codex
Theme Unit Test Codex<span style="font-style:normal"><i><h2 style="display:inline!important"><span style="font-style:normal;font-weight:normal;font-size:medium"><i>WordPress 3.3 Proposed Guidelines Revisions</i></span></h2>
</i></span><br>Chips article for new reviewers on his blog
This is what I base my reviews on but I can't be sure that I didn't miss a requirement hidden somewhere else. :)</i></font></pre><div style="font-family:arial,helvetica,sans-serif"><br></div><font face="arial, helvetica, sans-serif">I, for one, was not aware that jQuery functions must not be embedded in the Theme directly or that inline styles are not accepted. And I'm sure that goes for many Theme authors, too, as these things are not documented (to the best of my knowledge).<br>
<br></font></span></li><li><font color="#333333" face="arial, helvetica, sans-serif"><div>"I've seen that they were not reported in couple of reviews."<br></div>Except for when it was not a full review, I trust the preceding theme reviewer when picking up a ticket, especially on pre-approved Themes. We have to be able to rely on the judgement of our fellow reviewers. What do you think?<br>
<br></font></li><li><font color="#333333" face="arial, helvetica, sans-serif">SPAM links:<br>Since there are no clear guidelines in place, this is something I always feel very uncomfortable with. I know it is hard to phrase requirements to catch all forms and shapes of Spam-links, but I would love to have a clearer set of principles that I can base my findings on.</font></li>
</ul><div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div></div><div><font color="#333333" face="arial, helvetica, sans-serif">I'll now have breakfast. :)</font></div><span><font color="#888888"><div>
<font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Konstantin</font></div></font></span><div><div><div><br><div><div>On 04.05.2012, at 08:02, Emil Uzelac wrote:</div>
<br><blockquote type="cite"><font color="#333333"><font><font face="arial,helvetica,sans-serif"><i>Of course not, we're here to discuss not to debate :) </i></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">Being an admin or reviewer has very little to do with what could be good or not so good for WP users. Inline styles was something developers liked to do I would say 6-8 years ago. Using inline styles for personal projects is one thing, passing this onto users is another story. If and when we decide to use inline styles, that's called "dictating" and that's not what we should do. Users should be able to change their CSS elements from stylesheet and not wondering where other styles might be.</font></font></font></div>
<div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif"><i>In my understanding inline styles were not welcomed even before I've joined the team in December of 2010 :)</i></font></div>
<div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Other issues of inline styles:</font></div><div><ul><li><font color="#333333" face="arial, helvetica, sans-serif">Code Bloating</font></li>
<li><font color="#333333" face="arial, helvetica, sans-serif">Potentially slowing down the page load time</font><span style="color:rgb(51,51,51);font-family:arial,helvetica,sans-serif"> </span></li></ul><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">There's the reason why e.g. Google PageSpeed suggests that we load styles at the top of the page, styles should load before the page does, that will not be the case if inline styles are used. Inline styles will also cause browser interruption as well. Next would be that when using stylesheet as e.g style.css browser could easily cache that and reuse what you already loaded the first time you entered <a href="http://example.com/" target="_blank">example.com</a> and again inline will not. I can go on and on about this, but that would not be necessary :)</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">As far as jQuery inline styles that too is not the best practice and what I call "CSS Hacking". With jQuery you can use the stylesheet too. That's why some jQuery plugins will affect the performance of the page load. </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">I would highly recommend something like this:</font></font></font></div>
<div><ul><li><span style="font-family:arial,helvetica,sans-serif;color:rgb(51,51,51)">jquery.example.js</span></li><li><span style="font-family:arial,helvetica,sans-serif;color:rgb(51,51,51)">jquery.example.css</span></li>
</ul></div><div><font color="#333333" face="arial, helvetica, sans-serif">Cleaner code = less issues for users, less issues for users = less support for developers, simply stuff really.</font></div><div><font color="#333333" face="arial, helvetica, sans-serif"><br>
</font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Yes, this specifically was not in any of the links I pasted above, but I think that it goes into <a href="http://codex.wordpress.org/Theme_Review#Code_Quality" target="_blank">http://codex.wordpress.org/Theme_Review#Code_Quality</a></font></div>
<div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Anyone else if free to "jump in" and tell all of us why we should allow inline CSS. This is an open topic and there's nothing one admin can do if others don't agree with him, don't think of me that way please.</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</font></font></font></div>
<div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font><br><div class="gmail_quote">On Thu, May 3, 2012 at 11:55 PM, Sayontan Sinha <span dir="ltr"><<a href="mailto:sayontan@gmail.com" target="_blank">sayontan@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Emil,<br>I don't want to get into a debate here - this is too small a point. Just note this:<br><ol><li>I am not saying inline styles are good. I am saying they are okay, depending on the context. They certainly aren't bad or wrong, and they have their place. Pick up any reliable resource on the web - they will recommend against inline styles with a caveat, that they shouldn't be used <i>if</i> you want to offer the ability to override them. One way to interpret this is, "They are fine if you don't care about the ability to override them". In the cases that I use them, I make sure that the user has no reason to override them. Correctness here is really a question of context.<br>
</li><li>None of the links you have provided says inline styles must not be used - you can go through them. Thus it is not the official position of WP. Frankly I would be surprised if this is made an official position, in which case using the "css" function of JQuery should be disallowed too, in favour of "addClass".</li>
</ol>I have never officially reviewed a theme, however I do follow this thread very closely. You are a WPTRT admin and thus your word carries weight amongst other reviewers. It is just that I have coded some insanely complex scenarios and I have come up against more "exception" situations than most other developers. I am just trying to bring to light some such scenarios.<span><font color="#888888"><br>
<br>Sayontan.<br></font></span><br>PS: I take the "lazy" developers as a compliment. As per Larry Wall (the
creator of Perl), "The three chief virtues of a programmer are:
Laziness, Impatience and Hubris".<br><br><div class="gmail_quote"><div>On Thu, May 3, 2012 at 7:11 PM, Emil Uzelac <span dir="ltr"><<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>></span> wrote:<br>
</div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">There's no shortcuts in CSS, saving time -vs doing it right the first time is completely different. It is very important <div style="margin-top:33px;"> will be hard to override in a stylesheet and yes it is wrong and bad practice, how can this be good. Tables too, I did not use tables in years! </font></font></font><span style="color:rgb(51,51,51);font-family:arial,helvetica,sans-serif"><div style="margin-top:33px;"> is for "lazy" developers I am sorry, not sure if you're using them or not.</span><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">This is not something that I am pushing, it was much before me. My first message was also intended for reviewers and only as a reminder that's all.</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">See:</font></font></font></div></div><div><div>
<ul><li>
<span style="font-family:arial,helvetica,sans-serif;color:rgb(51,51,51)"><a href="http://codex.wordpress.org/CSS_Coding_Standards" target="_blank">http://codex.wordpress.org/CSS_Coding_Standards</a></span></li><li><font color="#333333" face="arial, helvetica, sans-serif"><a href="http://codex.wordpress.org/WordPress_Coding_Standards" target="_blank">http://codex.wordpress.org/WordPress_Coding_Standards</a></font></li>
</ul><div><font color="#333333" face="arial, helvetica, sans-serif">second link will give you better idea how strict the WP Standards are and how much of slack review team is giving to all of us.</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</font></div></div><div><div>_______________________________________________<br>
</div></div></div><div>
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></div></blockquote></div><div><div><br><br clear="all"><br>-- <br>Sayontan Sinha<br><a href="http://mynethome.net/" target="_blank">http://mynethome.net</a> | <a href="http://mynethome.net/blog" target="_blank">http://mynethome.net/blog</a><br>
--<br>Beating Australia in Cricket is like killing a celebrity. The death gets more coverage than the crime.<br><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>
_______________________________________________<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>
</blockquote></div><br></div></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></div>
</blockquote></div><br></div>