Conceptos básicos de CSS: la sintaxis que importa y la sintaxis que no | Programar Plus

Cuando empiezas a jugar con CSS desde el principio, como cualquier otro lenguaje, tienes que acostumbrarte a la sintaxis. Como cualquier sintaxis, hay un montón de pequeñas cosas que necesita saber. Algunos caracteres y su ubicación son muy importantes y necesarios para que el CSS funcione correctamente. Y algunos caracteres tienen más que ver con un código de aspecto limpio y, en general, siguen los estándares, pero no importan para que el CSS funcione.

Primero, tenemos la terminología abajo:

Un conjunto de reglas de CSS consiste en un selector y declaraciones entre llaves.

Importante: Tirantes

Todos los conjuntos de reglas de CSS deben tener llaves de apertura y cierre:

braces.header { relleno: 20px;}.header relleno: 20px;}.header { relleno: 20px;}.header relleno: 20px;

Si pierde la llave de apertura, CSS seguirá leyendo como si el siguiente fragmento de texto todavía fuera parte del selector. Entonces es probable encontrar un personaje como ; que no son válidos como parte de un selector y se rompen. Romper probablemente significa que se arruinará a sí mismo y al siguiente conjunto de reglas, y se recuperará después de eso.

La falta de una llave de cierre es un poco peor, ya que es probable que arruine el resto del archivo CSS completo, a menos que de alguna manera encuentre una llave de cierre doble y pueda resolver la primera que falta.

Punto general: ¡los frenos son muy importantes!

Los lenguajes de preprocesamiento como Sass y Less ofrecen una característica de sintaxis llamada anidamiento. Esto puede ser conveniente, pero tenga en cuenta que cuando estos preprocesadores se ejecutan y producen CSS, ese anidamiento se elimina porque CSS por sí mismo no lo admite. Si copia CSS anidado en CSS normal, tendrá problemas con las llaves.

A veces importante: espacios

Hay solo algunos lugares donde los espacios son importantes en CSS. Uno de los más importantes está en los selectores. Una el espacio en un selector significa que está seleccionando descendientes de la parte anterior del selector. el seleccionador body p significa “seleccionar p elementos que son descendientes del elemento del cuerpo”. Ese espacio significa mucho. Esperemos que sea claramente diferente a bodyp que no seleccionará nada (no hay <bodyp> elemento). Pero no es diferente de body p. Múltiples espacios significan lo mismo que un espacio.

spacebody ul libodyulli.header .title.header .title.header .title.header.title≠≠=

No puede poner espacios en propiedades, nombres de funciones o en cualquier lugar donde nombre cosas. Agregar espacios en esas situaciones cambia efectivamente los nombres, rompiéndolos.

espacios-3fondo-imagen: url(tigre.jpg);fondo – imagen: url(tigre.jpg);fondo-imagen: url (tigre.jpg);@keyframes goRoundAndRound { }@keyframes go-round-and-round { }@keyframes dan vueltas y vueltas { }:root { –tema principal: rojo; –tema-segundo: rojo;}cuerpo { fondo: var(–tema principal); fondo: var(–tema-segundo);}

Aparte de eso, el espaciado no importa mucho en CSS.

espacios_1.header { relleno: 20px;}.header { relleno: 20px; } .header {relleno: 20px; }.header{relleno: 20px; }.header{ relleno: 20px;}.header{relleno:20px;}

Lo animo a que sea consistente con su espacio y produzca un CSS limpio y legible. Es posible que desee consultar algunas guías de estilo CSS para conocer algunas de las mejores prácticas de formato.

Incluso el !important regla en CSS, que viene después de un valor en una declaración como body { background: white !important; } no tiene ningún requisito de espacio. Podría tener cualquier cantidad de espacio antes de él, o ninguno.

La eliminación de espacio en CSS es en realidad una práctica recomendada para el rendimiento, por lo que es posible que lo note cuando eche un vistazo al CSS sin procesar de los sitios web en producción.

Es mejor dejar esa minificación de CSS a una herramienta que procese su CSS por usted, dejando solo el original. Tendremos que cubrir las opciones para eso en otra publicación.

Principalmente importante: punto y coma

Cada declaración en un conjunto de reglas (un par de propiedad y valor) termina en un punto y coma. Se requiere ese punto y coma, de lo contrario, CSS seguirá leyendo la siguiente propiedad como si fuera parte del valor de la declaración anterior.

punto y coma.header { relleno: 20px; ancho máximo: 600px; fondo: negro; color: blanco}.header { relleno: 20px; ancho máximo: 600px fondo: negro; color blanco;}

Puede omitir el punto y coma en la última declaración de un conjunto de reglas. Advierto que hacerlo manualmente causará más problemas de lo que vale, y es mejor dejarlo en manos de las herramientas de minificación.

Importante: evitar caracteres extraviados

Esto es importante en cualquier idioma. Todos los caracteres en el código son importantes, por lo que es casi seguro que otros caracteres aleatorios romperán las cosas.

extra-chars.header { relleno: 20px;}.header { { relleno: 20px;}.header { relleno: ~20px;}.header { /relleno: 20px;}

No importante: saltos de línea

Un salto de línea se trata como cualquier otro espacio en blanco en CSS, así que siéntete libre de usarlo según sea necesario, siempre y cuando no rompa ninguna otra regla de espacio como la que mencionamos anteriormente.

line-breaks.bar { background-image: url(textura.png), url(tigre.jpg); }.button::after { content: “>”;} .header { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 20px 2px 5px -5px rgba(0, 0, 0, 0.5) ;}

Con todo, la sintaxis CSS no es tan difícil. ¡Buena suerte!

(Visited 2 times, 1 visits today)