Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

On WordPress Codex there are this CSS styles listed, its a quite big list of styles but it seems they are doubled unnecessary.

It says:

Each Theme should have these or similar styles in its style.css file to be able to display images and captions properly. The exact HTML elements and class and ID values will depend on the structure of the Theme you are using

this means all this styles should be in a theme?

Whats the reason for this specificity for the align styles that are already declared? By looking at this this it be reduced drastically.

What are the disadvantages in reducing this to a minimum?

/* =WordPress Core from http://codex.wordpress.org/CSS#WordPress_Generated_Classes
-------------------------------------------------------------- */

.alignnone {
    margin: 5px 20px 20px 0;
}

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

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

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

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

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

a img.alignnone {
    margin: 5px 20px 20px 0;
}

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

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: 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.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

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

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

The most definitive and up to date answer about best practice can come probably only from the wordpress.org theme review team, and right now they are different from the codex. just quoting it here, but I'm sure it might change with time

Themes are required to support the following WordPress-defined CSS classes, or similar elements:

 Alignment Classes:
    .aligncenter
    .alignleft
    .alignright 

Caption Related Classes:
    .wp-caption
    .wp-caption-text
    .gallery-caption 

Post Classes:
    .sticky 

Comment Classes:
    .bypostauthor

While needing to be present in the stylesheet, .sticky and .bypostauthor can remain empty (unstyled) if desired. The intent is simply to ensure that theme developers have considered all classes generated by WordPress

By this it doesn't look like you have to have all the CSS rules that are listed in the codex page you pointed to.

share|improve this answer
add comment

The align* and caption classes are generated by WordPress in shortcodes and image functions. You should use those in your stylesheet.

Of course, the Codex text is just an example.

.aligncenter,
div.aligncenter

… is a very poor selector. Slower and more redundant than necessary.

Also, the class names are not semantic meaningful: in a right-to-left output (Arabic) you may use …

.alignright {
    float: left;
}

But that is not easy to change and probably not worth the effort. So … live with it. :)

share|improve this answer
    
"… is a very poor and selector." what should this mean? U are not really answering my question and go into areas i not asked about. I also can read and i for sure am aware that wordpress generates this classes. My question was if need/should have all of them? My guess is its just an illustration of all classes wordpress creates and there is no reason to have them all so having .alignleft is enough and you can delete img.alignleft, .wp-caption.alignleft and so on! I want to know if the codex is just confusing or if there is a reason! You did not explain at all. –  James Mitch Jan 19 '13 at 1:36
    
@toscho, Actually, the .align CSS rules are semantically meaningful and are not being changed in RTL localization. –  Mark Kaplun Jan 19 '13 at 5:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.