[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex

[William Ludwig]

Yesterday in another thread i mentioned that the sample CSS at
http://codex.wordpress.org/CSS#WordPress_Generated_Classes 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.

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's half the size and should be easier to manage.

Thanks for reading this, sorry it's so long.


My tests are here, CSS is in the header to make it easier to view.  HTML is
identical.

Original ...
http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/new.html
New ...
http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/original.html


Here is a breakdown what I changed and why.

.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.aligncenter - removed as unnecessary because the first selector will
already catch any divs with .aligncenter.

a.img.alignright, a img.alignnone, a img.alignleft, a img.aligncenter -
removed, duplicates of the base alignment class with more complicated
selector.

.wp-caption.alignnone, .wp-caption.alignleft, .wp-caption.alignright -
removed, duplicates of the base alignment class with more complicated
selector.

.wp-caption p.wp-caption-text - Changed selector to just .wp-caption-text.
 No need to complicate it.  It really shouldn'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.


Final CSS

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    display: inline-block;
    margin: 5px 20px 20px 0;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

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

.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wordpress.org/pipermail/theme-reviewers/attachments/20120719/b286047e/attachment.htm>