Para ello primero, basado en los estilos CSS de Chris Harrison, procederé a explicar cada una de las clases CSS de los nuevos comentarios de WordPress, para que tengan una noción básica de que hace cada uno.

ol.commentlist {} /* Estilos para la lista de comentarios */
ol.commentlist li {} /* CSS para cada elemento individual de la lista de comentarios */
ol.commentlist li.alt {} /* Alterna estilo de los elementos de lista */
ol.commentlist li.bypostauthor {} /* CSS para el comentario hecho por el autor de un post */
ol.commentlist li.byuser {} /* Estilos para cuando comenta un usuario registrado */
ol.commentlist li.comment {} /* Elementos individuales, el comentario en sí */
ol.commentlist li.comment div.vcard {} /* DIV que agrupa el avatar, nick y URL de cada comentario */
ol.commentlist li.comment div.vcard cite.fn {} /* Nombre del comentarista cuando este no deja URL */
ol.commentlist li.comment div.vcard cite.fn a.url {} /* Aplica cuando el comentarista deja la dirección de un sitio web */
ol.commentlist li.comment div.vcard img.avatar {} /* Para el avatar que se muestra en cada comentario */
ol.commentlist li.comment div.vcard span.says {} /* Da estilo a la frase "says" ó "dijo" en los comentarios */
ol.commentlist li.comment div.commentmetadata {} /* DIV donde se muestra la hora y fecha en la que se realizó la opinión */
ol.commentlist li.comment div.comment-meta {} /* Fecha del comentario */
ol.commentlist li.comment div.comment-meta a {} /* Lo mismo que arriba pero aplica si se muestra como enlace */
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.) /* Listas, blockquotes y más en los comentarios */
ol.commentlist li.comment div.reply {} /* DIV del botón de respuesta a un comentarios especifico */
ol.commentlist li.comment div.reply a {} /* Estiliza los enlaces dentro del DIV Reply */
ol.commentlist li.comment ul.children {} /* Define la posición y otras cosas de la lista de comentarios anidados */
ol.commentlist li.comment ul.children li {} /* Para cada elemento de la lista de Child Comments */
ol.commentlist li.comment ul.children li.depth-2 {} /* Para cada nivel de anidación de comentarios */
ol.commentlist li.comment ul.children li.depth-3 {} /* Idem a arriba, tan sólo cambia el número */
ol.commentlist li.even {} /* Establece valores de las propiedades CSS de los comentarios pares */
ol.commentlist li.odd {} /* Establece valores de las propiedades CSS de los comentarios inpares  */
ol.commentlist li.parent {} /* Comentario padre de los Child Comments */
ol.commentlist li.pingback {} /* Estilo para elementos con trackbacks ó pingbacks */

Ok ya tenemos orientación, de igual forma faltan estilos para Pingbacks, no lo explico todo porque sería muy largo el post, pero siempre podrán consultar el enlace de arriba y tomar referencia de lo que ya tenemos.

No obstante la teoría no es nada si no hay un ejemplo práctico.

Por lo que este es el CSS que utilizaremos para darle una fachada vistoza a nuestra armazón lograda previamente, los estilos están probados para llegar a los 6 niveles de anidación sin problema, además de ser crossbrowser… y claro que pueden modificarlos a su conveniencia.

div#respond { margin: 20px 0 10px 0; background: #F7F7F7; border: 1px solid #CCC; padding: 10px 10px; overflow: hidden; }
div#respond textarea { background: #FFF; width: 90%!important; height: 75px; padding: 7px; color: #464646; font-family: arial; font-size: 14px; border: 1px solid #CCC; }
div.allowed-tags { width: 90%!important; font-style: italic; background: #F9F9F9; padding: 7px; font-size: 0.75em; }
div.navigation { clear: both; overflow: hidden; margin-bottom: 15px; }
p#comment-notes { padding-right: 20px; }
div.navigation a { color: #5190CE; }
div.navigation a:hover { color: #464646; }
div.navigation .alignleft { float: left; width: 50%; }
div.navigation .alignright { float: right; text-align: right; width: 50%;}
div.cancel-comment-reply { margin: 10px 0 10px 0; text-transform: capitalize;}
ol.commentlist { font-size: 1.1em; list-style:none; text-indent:0; margin:0 0 0em; padding:0; text-indent:0; }
ol.commentlist li { margin: 12px 0; background : #FFF url('images/comment_white_bg.png') repeat-x bottom; border: 1px solid #ddd; color: #B3B3B3; }
ol.commentlist li.comment { border: 1px solid #dfdfdf; background: #FDFDFD; padding: 1em; }
ol.commentlist li div.vcard cite.fn a.url { text-decoration: none; }
ol.commentlist li div.vcard img.avatar { border: 2px solid #ccc; width: 54px; height: 54px; float:left; padding: 5px; background: #fff; margin-right: 12px; }
ol.commentlist li div.comment-meta a { color: #8c8c8c; text-decoration: none;}
ol.commentlist li div.comment-meta a:hover { text-decoration: underline; }
ol.commentlist li div.vcard cite.fn a.url:hover { }
ol.commentlist li p { color: #606060; clear:both; margin: 10px 0;  text-align: justify; }
ol.commentlist li ul { list-style:square;  margin: 0 0 1em 2em; }
ol.commentlist li div.reply { text-align: right; margin: 5px; }
ol.commentlist li div.reply a { font-size: 0.815em; background: #609d1e; color: #f9f9f9; padding: 3px 7px; text-decoration: none; text-transform: capitalize;  }
ol.commentlist li div.reply a:hover { background: #464646; color: #f8f8f8; padding: 4px 7px; text-decoration: none; }
ol.commentlist li ul.children { list-style: none; margin: 1em 0 0; text-indent:0; }
ol.commentlist li ul.children li.depth-2 { background: #f3f3f3; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-3 { background: #eeeeed; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-4 { background: #e4e4e4; border: 1px solid #d4d4d4; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-5 { background: #f3f3f3; border: 1px solid #dfdfdf; margin:0 0 10px 0; }
ol.commentlist li ul.children li.depth-6 { background: #eeeeed; border: 1px solid #dfdfdf; margin:0 0 10px 0; }

Si se me pasó algo no duden en aclararmelo, en el siguiente post de la serie veremos como realizar unos cuantos trucos para mejorar la interactividad del usuario.

Y aunque no me considero un experto en el tema, tengo unos cuantos consejos, técnicas y trucos CSS que he ido guardando a lo largo del tiempo, mismas que comparto a continuación:

Trabaja por secciones

Ejemplo aplicado al style.css de un theme WordPress, divide tu hoja en secciones: Estilos Globales o Generales, del Contenedor principal, Sidebar…

/* Global */
body { font: 14px/1.6 Arial, Helvetica, Verdana, sans-serif; }
/*Area de Contenido */
#wrap-post { width: 600 px;  float: left; }

CSS Shorthand, el mejor amigo de tu hoja estilos.

El principio básico del asunto según la W3C es que CSS esta compuesto por 2 cosas: un selector y una declaración y en cada declaración hay una propiedad y un valor, basandonos en esto los shorthands serían propiedades con valores condensados o comprimidos, ejemplo práctico:

/* Propiedad margin sin shorthand */

.elemento {
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 5px;
}

/* Propiedad margin usando shorthand */
.elemento { margin: 10px 5px 20px 10px; } 

Para entender mejor esto, les recomiendo leer la Guía del CSS Shorthand.

Agrupa selectores

Tienes 2 o más selectores y las mismas reglas, no escribas lo mismo 2 veces.

.bloque { background: #FFF; padding: 15px; margin-top: 10px; }
.articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Agrupalos de esta forma:

.bloque, .articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Menos espacio es igual a más rápido.

La optimización del CSS apunta a la compresion de éste, entre menos espacio hay entre tus selectores, más rápido cargará el navegador tu página. Por ende es mejor escribir las declaraciones como lo hice en el anterior ejemplo, sin espacios en blanco.

Espero que esta serie de tips te ayude a escribir hojas de estilo más optimizadas.