soy Kseso y esto EsCSS

Apuntes rápidos al margen para iniciar un "Curso Css desde cero"

De vez en cuando me da por divagar y darle vueltas a algún aspecto relacionado con Css. Y las menos hasta oso ponerlas por escrito. Esta es una de esas ocasiones.

Apuntes rápidos al margen para iniciar un "Curso Css desde cero"

·Por Kseso ✎ 7
Apuntes rápidos al margen para un "Curso Css desde cero"
Apuntarse a cursos web en Septiembre viene siendo lo mismo que hacerlo al gimnasio el 7 de Enero.
Y el resultado suele ser el mismo.

Tranquilo. Pierde cuidado y miedos. No voy a venderte nada. Esto no es ni otro curso más ni nada que se le parezca. No. Es algo más simple.

Desde siempre me han llamado la atención el "temario" o corpus de todos los llamados cursos para aprender css desde cero que uno se puede encontrar por la red. Ya sean de pago o "gratis no hay nada". En foma de "libros", vídeos o artículos en línea.

Por mi discrepancia con el contenido o desarrollo de bastantes de ellos que conozco, me he planteado, de un tiempo a esta parte, cuáles serían los primeros capítulos, lecciones o ideas básicas que yo incluiría en mi curso Css desde cero ideal. Si pensase crearlo, que no pienso.

Y después se me ha ocurrido que quizás estos apuntes rápidos puedan ayudar en algo a quienes estén pensando en iniciarse en Css tomando algún curso o a quién vaya a crear alguno. O no.

El formato

Escrito. No tengo dudas. Nada de en vídeo, postcast o similares. Escrito y si es posible en algún formato descargable. Que me permita leer, releer y volver a leer. Y seleccionar y hacer búsquedas, en el propio documento o en la red.

Y escrito porque quiero tener enlaces a un click a destinos donde desarrollen más en profundidad conceptos, ideas o demos para quien quiera ampliar o necesite más info.

Y escrito porque quiero ver y quiero poder seleccionar los códigos y ejemplos. Y quiero poder modificarlos y observar el efecto de mis cambios.

El inicio o introducción al curso

Aquí no tengo dudas. Y es esta parte del comienzo la que más suelo echar en falta. Y muchas veces su ausencia hace que dude de la calidad del curso por errores de bulto o conceptuales básicos y hasta de los conocimientos de Css de su autor por lo impreciso y poco riguroso en sus palabras.

Este sería mi inicio ideal. Si en algún momento le he dedicado algún artículo incluyo enlace.

¿Qué es Css? y su ámbito de aplicación

Si estamos hablando de un curso Css desde cero o para comenzar con este lenguaje creo obligado dedicarle unas líneas a ello. Porque la respuesta ha ido cambiando con el tiempo. Apartado breve y conciso. A la vez que despeja dudas sobre qué puedes hacer con Css y qué no es un buen lugar para ilusionar con todo lo que es posible.

Vocabulario, terminología y sintaxis de Css

Para transmitir un conocimiento se necesita un lenguaje. Para que no haya dudas en la trasmisión se necesita que el lenguaje sea preciso e inequívoco (a no ser que juguemos con eso: los equívocos).
Así que es obligado hablar con propiedad y llamar a las cosas por su nombre. Nada de llamar atributos a las propiedades, hablar de capas por sujetos del selector, o vender Css4. Por ejemplo.

Tras esto y también como introducción o preliminar inexcusable, otro aspecto es el dominio de algunos conceptos clave. Entre ellos:

Referencias y fuentes para consulta

No. Aquí no va una extensa lista de enlaces a recursos y páginas. No. Yo dedicaría en este preámbulo unas líneas a explicar qué es el W3c y más específicamente para saber moverse entre sus documentos relativos a Css. Imprescindible saber usarlos como referentes y fuente primera de información cualificada y fiable.
Y para aquellos que, como yo, el inglés le resulte duro y en aquellos aspectos de Css que no han cambiado significativamente desde su formulación en el nivel 2 (Css2) la traducción que hizo Carlos Benavidez en Sidar.org.

Cascada, especificidad y herencia.

En su nombre lo lleva y obliga: CSS = "Cascading style sheet" = "Hoja de estilos en Cascada". Así que obligado fijar estos tres aspectos y despejar las dudas desde un inicio. Con mención a la existencia de los media type.

Box model: El concepto y los 3 modelos de caja en Css

Básico. Fuente de muchos quebrantos en quien se inicia si no se tiene claro. Poder ver cualquier elemento del html y su contenido como eso, una caja o contenedor, facilita su abstracción e imaginar y poder visualizar cualquier situación y su funcionamiento antes de escribir una sola línea de código.
Y por supuesto, avanzar todas las posibilidades y ventajas del flexbox frente al tradicional. Es 2015.

Primer capítulo

Teniendo claros los conceptos básicos para saber con claridad de qué hablamos y cómo hacerlo de la forma más precisa, el primer capítulo como tal estaría dedicado a estos temas que dan una visión global de Css:

Cómo vincular el Css a la página

Las distintas formas de llamar a los estilos y los distintos medios de aplicación (media=''). Advirtiendo de los peligros del @import es obligada e inexcusable la mención al elemento style dentro del body o cualquier otro elemento contenido en él que introdujo Html5. Básico en la web modular o en expresión actual atomic design.

Css estructural, tipográfico y decorativo

Prácticamente todo el corpus de Css se puede dividir en tres categorías:
  • Los documentos (y las propiedades desarrolladas en ellos) dedicados a la composición de la página (su estructura o layout).
  • Los que permiten controlar los aspectos relativos a la cuestión tipográfica. Tan vital como el anterior. Unos contenidos ilegibles o o que no inviten a ello hacen abandonar la página tanto como un layout descompuesto.
  • Aquellas otras que son estéticas o decorativas (para hacerla bonita según gustos).
Tener esto claro facilita la comprensión de Css y buscar de forma más eficiente la propiedad y el valor concreto que posibilitará lo que queramos lograr.

Propiedades simples vs shorthand y valores

La existencia de propiedades que controlan un sólo aspecto, otras que son la forma abreviada de declarar conjuntamente (con un solo nombre de propiedad) varias de ellas y los distintos tipos de valores permitidos en Css, que también pueden ser múltiples adictivos (se aplican todos), múltiples excluyentes (sólo 1 aplica) o únicos.

Selectores Css: Segundo capítulo monográfico

Hasta aquí todo ha sido crear unos cimientos sólidos. Una base que permitirá pensar e imaginar, comprender y asimilar cualquier aspecto de Css. Y hacerlo de forma crítica para discernir lo que es relevante y lo complementario.

Así que, tras lo anterior, llegado el momento de desarrollar a fondo aspectos concretos de Css en este hipotético curso de Css desde cero yo desarrollaría hasta el hartazgo y más allá todo lo relativo a los selectores Css.

De poco servirá que conozcas muy bien algún apartado si tienes dificultad para asignar las declaraciones al elemento del Html deseado y sólo a él.

Tercer capítulo y siguientes

Y a partir de este punto todo dependerá de la visión, prioridades y objetivos del autor del curso. Si cree que es primordial la conformación del layout se decantará por las propiedades que lo manejan. Hoy ya el flexbox manda.

Si crees que la web es el contenido y dentro de éste prima lo escrito, todo lo relacionado con la tipografía y su dominio.

Y todas y cada una acompañadas de su demo correspondiente. Hoy con servicios como Codepen y similares es muy sencillo. Esas demos sirven tanto para ilustrar cualquier aspecto como para poder cambiar valores y ver su efecto en vivo y en directo.

Junto a lo anterior y en algún momento habrá que hacer mención a las particularidades interpretativas de los navegadores de la norma (o su ignorancia total) y de la diversión que ello introduce. Más que nada para evitar saltos por la ventana o desesperaciones por causa ajena. Ante cualquier fallo o efecto no deseado de un código impoluto.

¡Qué pesado! ¡Acaba ya!

Como verás, estos apuntes rápidos y al margen para iniciarse en Css no difieren mucho de lo que sería cualquier curso de cualquier grado de cualquier materia:

  • Aspectos teóricos y específicos sobre él: terminología, conceptos propios, función...
  • Su base o documentación oficial que lo desarrolla: su formulación.
  • Cómo hacerlo funciona (sintaxis) y casos de uso ejemplificados.

Tampoco quieras ver, porque no es la intención, críticas o desautorizaciones a cursos existentes o a sus autores. Hay cursos que no es que sean menos buenos o no tan malos, no. Hay algunos que símplemente se equivocaron al llamar curso a lo que es un artículo o post, o una guía de aproximación o inicio, o que sólo se centran en una parte mínima de tal o cual aspecto.

Y en otros casos son exposiciones magistrales en las que quienes las recibimos estamos obligados a conocer los aspectos generales. Llevan un paso más allá del límite la parte que tratan y nos obligan a nosotros a traspasar fronteras imaginarias (el típico "con css no se puede") y descubrir nuevas posibilidades y genialidades que ni imaginábamos.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso