Orientación de elementos anidados con CSS

Question

Digamos que tengo un marcado profundamente anidado que quiero apuntar con CSS. Podría ser cualquier cosa, pero por ejemplo:

<div> 
    <div id='someid'> 
     <span class='someclass'> 
      <a class='link' href='alink'>Go somewhere</a> 
     </span> 
    </div> 
<div> 

¿Es aceptable escribir una regla CSS dirigidas a la etiqueta <a> directamente como aquí?

a.link { font-size: large; } 

¿O esto se considera no estándar que puede fallar en algunos navegadores? ¿Tengo que apuntar a cada elemento de la cadena de esta manera?

div div span.someclass a.link { font-size: large; } 

Answer 1

Ambos son completamente aceptables y la respuesta depende de su solución específica. Por ejemplo, si tiene otras áreas en las que está compartiendo propiedades comunes que están definidas por esa clase, le recomendamos que la mantenga lo más general posible. Si por ejemplo usted tiene una navegación y los enlaces en esa zona comparten algunos elementos comunes los que podrían ser definidos por a.link

Luego, en su html anidada, es posible hacer algo como

.someclass a.link {font-size:8px} para hacer que el texto más pequeño.

Aquí es un artículo que describe cómo funciona la especificidad: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

Cuanto más específico sea su CSS, menos flexible será. Es tu propio intercambio. Si le vas a dar a los enlaces una clase específica como esa, estoy bastante seguro de que serán visualmente iguales ya sea que aparezcan dentro de este árbol o fuera de él para que puedas seguir con tu primer ejemplo.

Answer 3

a.link es la mejor manera de hacerlo. Si desea que cierto a.link sea diferente del resto, deberá agregarle algo de peso.

a.link { ... } /* Global */ 
span.someclass a.link { ... } /* Finds all a.link within span.someclass */ 

selectores de descendientes (línea 2) no son la forma más eficiente para añadir estilo a un elemento, por lo que usarlos con moderación. Personalmente, los utilizo cuando necesito dar estilos especiales a una Clase Global dentro de una determinada ID/Clase.

Answer 4

De hecho, es recomendable utilizar a.link en lugar de la larga y fea segunda opción, que puede causar problemas de especificidad y rendimiento.

Es aún mejor si usa solo .link. Esa es la mejor opción.

Answer 5

Ambos son perfectamente válidos, y el que use depende de lo que desee hacer.

Si va a crear una clase genérica que desea ser capaz de utilizar a lo largo de todo su sitio sin tener en cuenta los elementos y donde el elemento es, usted debe única uso .class. Un buen ejemplo de esto es algo como .icon que puede utilizar en enlaces, artículos de lista, encabezados, etc. Y desea poder usarlos en todas partes.

Si está creando una clase que es específica de/solo funciona en un elemento de cierto tipo, también es mejor usar el elemento en el selector.Un ejemplo de esto sería una lista de viñetas que desea mostrar en una línea, ya que esta clase requiere que el HTML sea un <ul>, debe especificarlo también en el CSS; ul.inline. De esta forma, puede usar el nombre de clase "en línea" para otros elementos, sin que el estilo afecte a ambos.

Si solo está utilizando la clase para seleccionar el elemento pero no debe tener ningún estilo genérico, debe ser específico. Por ejemplo, es posible que desee que el primer párrafo de su elemento #blog-post sea más grande, luego debe especificar #blog-posty la clase; #blog-post p.first (tenga en cuenta que estos tipos de clases raramente se necesitan más gracias a los selectores avanzados como :first-of-type, h2 + p, etc.).

Diciendo que ".link es el mejor, a.link es el segundo mejor y un selector largo es malo" es simplemente incorrecto. Todo depende de la situación.