Simplificar CSS

¡Hola! Bueno, hoy aprenderemos cómo hacer que ese lio enorme de CSS que tenemos se haga más corto y simple. Principalmente veremos códigos que están desactualizados, compatibildades y otros detalles. Si se me pasa algo, ¡avisen! Por cierto, este tuto es válido al día de la fecha, cuando surjan más compatibilidades lo actualizaré... (:

1. Bordes.
Vale, haz puesto un bonito borde redondeado a tu foro o a una caja. Pero ¿CUANTOS códigos has usado? Antes que todo, debes saber que estos:

-moz-border-radius
-webkit-border-radius

¡YA PASARON DE MODA! Hoy día se puede usar sólo border-radius sin ningún problema de compatibilidad. Además, si quieres que todos los bordes tengan el mismo radio, basta con que lo coloques una vez:

border-radius: 15px 15px 15px 15px >> ¡propiedad poco feliz!
border radius: 15px; >> ¡propiedad feliz! ^^

Colocar cuatro valores es útil cuando uno de ellos es diferente, ya que cada uno referencia a una esquina del elemento (superior izquierda, sup. derecha, inf. derecha e inf. izquierda respectivamente) pero si tu objetivo es darle el mismo redondeado a todas las esquinas coloca un solo valor


2. Backgrounds.
Si quieres colocar un fondo a algo, no hace falta que especifiques background-image, background-color, etc; ¡puedes colocarlo todo bajo el nombre background! La sintáxis completa de background es:

background: color posición tamaño repeat origen clip adjunto imagen;

Entonces por ejemplo puedes si quieres un fondo de imagen que no se repita puedes colocar:

background: no-repeat url('link de tu imagen');


3. Fonts.
Algo parecido a lo que sucede con los backgrounds sucede con las propiedades de la familia font. Se pueden agrupar así:

font: font-style font-variant font-weight font-size/line-height font-family;

Entonces por ejemplo podríamos tener:

font: italic small-caps 400 15px/30px Arial;


4. Padding, margin.
Algo parecido a lo que sucede con los bordes redondeados sucede con los paddings y márgenes, ya que no es necesario asignarles cuatro valores si los cuatro valores serán iguales:

padding: 10px 10px 10px 10px;
margin: 5px 5px 5px 5px; >> códigos poco felices
padding: 10px;
margin:5px; >> códigos shuer felices :3


5. Códigos generales.
¿Tienes propiedades que deben ser aplicadas a la mayor parte de los elementos que hay en lo que sea que estés haciendo? ¡En ese caso no los repitas para cada div! Dale esas propiedades a un div que englobe todo, y modificá las propiedades de las cosas que son excepciones, no de la regla.