問題描述

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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。