问题描述

On WordPress Codex 列出了这些 CSS 样式。这是一个相当大的样式列表，但它似乎是不必要的倍增。

它说：

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

这是否意味着所有这些风格应该在一个主题？

对于已经声明的对齐样式，这种特殊性的原因是什么？看这个，似乎可以大大减少。

将其降低到最低限度的缺点是什么？

/* =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;
}

最佳解决方法

关于最佳实践的最明确和最新的答案可能只能来自 wordpress.org 主题审查小组，现在 they 与抄本不同。只是在这里引用它，但我确信它可能会随着时间而改变

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

这样看来，您不一定要拥有指向的 codex 页面中列出的所有 CSS 规则。

次佳解决方法

align*和 caption 类是由 WordPress 在短码和图像功能中生成的。您应该使用样式表中的那些。

当然，法典文本只是一个例子。

.aligncenter,
div.aligncenter

… 是一个非常糟糕的选择器。比必要的更慢和更多的冗余。

此外，类名不是语义有意义的：在 right-to-left 输出 (阿拉伯语) 中，您可以使用…

.alignright {
    float: left;
}

但这不容易改变，也许不值得的努力。所以… 住它:)

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。