Diferentes Tecnicas Y Clases Del CSS [UPDATED]

Los equipos de desarrollo tienen diferentes estrategias para escribir selectores de CSS. Algunos equipos usan delimitadores de guiones, mientras que otros prefieren usar una convención de nomenclatura más estructurada llamada BEM.

Diferentes tecnicas y clases del CSS

En Empezar con el CSS, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.

No hagas esto a menos que realmente tengas que hacerlo! Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos.

No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios tipos diferentes en la lección Empezar con el CSS. Un selector es, como determinamos, un elemento de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es probable que el selector no coincida con lo que crees que debería coincidir.

Los comentarios en el CSS comienzan con /* y terminan con */. En el bloque de código que encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que aumenta: puedes buscar los comentarios en tu editor de código.

Tú deberías siempre usar clases en tu CSS. Esto te permite aplicar el mismo estilo a más de un elemento diferente sin replicar reglas. Tu código se vuelve más corto y más limpio.

Las clases CSS nos permiten el tipo de reutilización que nos brinda la herencia en los lenguajes orientados a objetos. Cree una jerarquía de clases para reutilizar estilos comunes incluso en diferentes elementos.

Por ejemplo: tienes dos elementos en la página (.menu y .noticias) que tienen diferentes funciones y efectos visuales. Pero los dos siguen la base visual del sitio, que es tener un fondo gris, con un borde redondo y una sombra. En lugar de copiar propiedades, crea una nueva clase base para estos elementos:

Es preferible que crees esta clase nueva .box que escribir CSS usando las clases de los otros dos elementos .menu, .noticias ... . El día que aparezca un tercer box, simplemente aplica la clase, sin interferir en el CSS.

No luches con especificidad. Mantén la especificidad de tus selectores al mismo nivel usando clases siempre para estilizar. Son más fáciles de componer. Y nunca uses !important para forzar un estilo.

Escribir el nombre tag en el medio del CSS hace que tu estilo se combine con la estructura de HTML. Si el HTML cambia, tu estilo se rompe. Podemos evitar esto creando más clases y disminuyendo el acoplamiento entre HTML y CSS.

Y dado que buena parte de las prácticas pasa por crear nuevas clases, es bueno saber nombrarlas correctamente. La regla obvia, ya sea que ya la esté siguiendo, es crear nombres legibles y fáciles de entender. Usar .panel-principal al revés de .pnlPri.

Pero eso no es todo. Los nombres de las clases son el puente entre tu HTML y tu CSS. Se escribirán en el medio del contenido HTML de la página y, por lo tanto, deben tener semántica de contenido y no de visual.

Eso significa que no deberías crear clases llamadas .box-lateral o .titulo-azul o .panel-derecha. Si tu box no es lateral o el título cambia de color o el panel cambia de lado, tu clase pierde el significado.

Evita esto creando clases con nombres de contenido, como .panel o .llamada-principal. Y, por supuesto, si, eventualmente, tienes un .titulo-azul en tu código, no dejes la clase con este nombre el día que el color cambia a rojo; cambia el nombre de la clase!

Se trata de cursos impartidos por diferentes universidades e instituciones, así como los creados por usuarios en distintas plataformas que sobresalen por su calidad y popularidad. Son cursos que podemos realizar en cualquier momento del año y a nuestro propio ritmo.

Cada uno de ellos te ayudará a seleccionar diferentes grupos de elementos en un sitio web. Comenzaremos con uno de los tipos que te permitirán dirigirte a grupos grandes de elementos y, posteriormente, veremos algunos que te servirán para seleccionar elementos de manera más específica.

Este es el código en CSS con tres diferentes pseudo-clases para los enlaces que no han sido visitados, para aquellos a los que se ha accedido y para aquellos sobre los que se está deslizando el usuario:

Supongamos que tienes una gran diversidad de elementos a los que quieres aplicar el mismo estilo, como un h2 y una clase .spacious, y quieres hacer verdes ambos elementos. El código podría ser escrito en dos líneas diferentes, como puedes ver aquí:

Los selectores CSS te permiten mantener un buen control respecto al modo en que diseñas y codificas al momento de construir un sitio web desde cero. A pesar de que dominar estas herramientas puede llevarte algo de tiempo, es una inversión que rendirá sus frutos. Aprende a usarlos y prueba con los diferentes tipos que te hemos compartido para que puedas darle el estilo indicado a tu marca con un código elegante, simple y de carga rápida.

Tenga en cuenta que las últimas tres (estas son las "pseudoclases de acción de usuario"; las dos primeras son las pseudoclases de enlace) pueden utilizarse en los estados de prácticamente cualquier elemento en el que tenga sentido usarlas en una interfaz de usuario. Por ejemplo, puede que desee que un campo de entrada de formulario adopte un estilo diferente al colocarle adentro el cursor del teclado mediante el tabulador o tal vez desea que aparezca un cuadro de información solamente cuando coloca el cursor del ratón sobre una parte determinada de la pantalla.

Estas pseudoclases tratan todas de la aplicación de estilos a estados avanzados de elementos de la Interfaz de usuario (IU). Comúnmente las utilizará para aplicar estilos a elementos de formulario de HTML, especialmente cuando se utilizan algunas de las nuevas características de formulario de HTML5, como la validación nativa (vea Elementos adicionales de formulario del HTML5 para mayor información).

Las pseudoclases estructurales son selectores avanzados que le permiten seleccionar elementos específicos en función de su posición en la jerarquía del documento. Estos fueron introducidos en las CSS3 y creados en base a los selectores que ya hemos analizado, como el selector de hermanos adyacentes.

A continuación, vamos a echar un vistazo a :first-child y :last-child. Estas pseudoclases seleccionan sólo la primera o última instancia de un elemento que es el primer o último elemento secundario de su elemento padre. Por lo tanto, considerando el ejemplo de arriba una vez más, podríamos utilizar los siguientes para seleccionar, respectivamente, el primer y el último elemento :

Por favor, tenga en cuenta que los pseudoelementos se escriben de una nueva manera en las CSS3 usando doble dos puntos, por ejemplo a::after ... , para así diferenciarlos de las pseudoclases. Puede ver esto con frecuencia en las CSS. Sin embargo, las CSS3 también siguen permitiendo sólo dos puntos para los pseudoelementos en aras de la compatibilidad con versiones anteriores y le aconsejamos que se quede con esta sintaxis por el momento.

La separación del formato y el contenido hace posible presentar el mismo documento marcado en diferentes estilos para diferentes métodos de renderizado, como en pantalla, en impresión, en voz (mediante un navegador de voz o un lector de pantalla), y dispositivos táctiles basados en el sistema Braille. También se puede mostrar una página web de manera diferente dependiendo del tamaño de la pantalla o tipo de dispositivo. Los lectores pueden especificar una hoja de estilos diferente, como una hoja de estilos CSS guardado en su computadora, para sobreescribir la hoja de estilos del diseñador.