Sesión de maquetación: HTML5 + CSS3

BeyonCSS

Paul Melero


  @pollobrav0

  https://github.com/gangsthub/layout-or-get-out

CSS

Cúanto Sinvergüenza Suelto

Cascade Style Sheets

Lo básico de CSS es !CSS

Block Level elements Line Level elements

(HTML 4 [1997 - 2007])

  • DIV - Generic block-level container
  • ADDRESS - Address
  • BLOCKQUOTE - Block quotation
  • FORM - Interactive form
  • H* - Level-* heading
  • HR - Horizontal rule
  • OL - Ordered list
  • UL - Unordered list
  • LI - List item
  • P - Paragraph
  • PRE - Preformatted text
  • TABLE - Table
  • TD - Table data cell
  • TR - Table row
  • etc.
  • SPAN - Generic inline container
  • A - Anchor
  • ABBR - Abbreviation
  • ACRONYM - Acronym
  • B - Bold text
  • BDO - BiDi override
  • TEXTAREA - Multi-line text input
  • SMALL - Small text
  • SELECT - Option selector
  • IMG - Inline image
  • BIG - Large text
  • BR - Line break
  • etc.
  • Pseudo elementos

Cajas/contenedores (estilos gratis)

HTML 5.1(2016)

El elemento `div`

The <div> element has no special meaning at all.

https://www.w3.org/wiki/HTML/Elements/div

(4.4 Grouping content)

El elemento `span`

The <span> element doesn't mean anything on its own

https://www.w3.org/TR/html5/text-level-semantics.html#the-span-element

(4.5 Text-level semantics)

Otro de los pilares de la maquetación

Conocer el modelo de caja

Chrome y Firefox 


                            box-sizing: content-box;
                        

                            padding: 0;
border: 0;

Diferencia entre ambas

Hora de mancharse las manos

Algunas reglas las carga el diablo

Recapitulando conceptos


  1. Block level + inline level

  2. Modelo de caja (+ border-box)

💪 Debuggear CSS 💪

DevTools es tu amigo 🙌

1- Estilos aplicados y herencia
Pestaña estilos (Árbol invertido)
2- Todos los estilos computados
Pestaña computados
3- Usar como IDE
Pestaña sources + añadir al workspace

Metodología: debuggear la herencia:

  1. Escalar en los estilos aplicados 🐒
  2. Escalar en los computados 🐒
  3. Si no está ahí, depende de una herencia aplicada en línea 🙈


  • Ver en qué archivo se encuentra y editarlo (si corresponde)

Algo importante a tener en cuenta

La herencia de CSS no tiene nada que ver con la herencia de OOP.





    

      Hello world!

Lista de elementos que heredan en CSS2

Global scope y cascada

Por defecto, los estilos tienen un alcance global.

Pregunta trampa: ¿De qué color se pinta?

  1. Cascada de un solo archivo
  2. No está en el mismo archivo: carga de archivos de css. Depende del orden de declaración
  3. Scope por elemento: especificidad

UA CSS

Caso especial: Es lo que primero computa en la cascada en un UA (navegador): UA CSS

FFI

Concepto de cascada

En resumen: el orden dónde se llama a las cosas

Especificidad


p.clase {
    foo: bar; /* 1 */
}
.clase {
    foo: baz; /* 2 */
}

Pregunta ~trampa: qué regla se computa?

Especificidad: pesos.


Cero (Excepción)
Selector Universal
Unidades
"Número de tipos de selectores y pseudo-elementos"
Decenas
"Número de selectores de clase, atributo y pseudo-clases"
Centenas
"Número de selectores de ID"
Millares
Estilos en línea

Enlace de la spec de CSS3, con ejemplos

Importancia


.clase {
    foo: bar!important; /* 1 */
}
.clase {
    foo: baz; /* 2 */
}
  • !important es el reflejo de maquetadores/as vagos/as!
  • Pero también (casi) la única manera de deshacerse de estilos inline (JS)

Recapitulando conceptos


  1. Block level + inline level

  2. Modelo de caja (+ border-box)

  3. Concepto de herencia

  4. Debuggear herencia

  5. Resumen del concepto de cascada

  6. Especificidad

Última sección

Convenciones de naming

Algunas, también, paradigmas de arquitectura

HTML semántico

Cómo nombras a las clases depende de la convención que elijas (arbitrariedad)

Tantas convenciones como Frameworks de JS!

El HTML no es arbitrario.




    texto
    texto
    texto


                    



    
    
  • texto
    • 
    
  • texto
    • 
    
  • texto
    • 


                    




    texto
    texto
    texto

Buenas prácticas en proyectos grandes:

  • Aplicar convención de naming + arquitectura
  • Dar estilo por componentes? Casos: CSS Modules, VueJS, React)
  • Tener una guía de estilo!
  • Linteo: StyleLint
  • Test: Ej: PhantomCSS
  • Nunca !importants, estilos en línea, selectores de ID...
  • Utilizar primero las las librerías de front que trae el proyecto (Ej: Bootstrap).
  • Con cada funcionalidad, intentar añadir cada vez menos CSS
  • Nombres de todo siempre en inglés
  • Reducir el número de Magic Numbers
  • Usas sass? Mixins. Listas. Iteración. Constantes globales...

// ToDo

  • Práctica: Centrado Vertical
  • Diseño Responsive
  • Optimización de ejecución de CSS con DevTools

Selectores de DevTools:

  • $
  • $$
  • $x("//p[a]")
  • $0 // ($1, $2, $3...)

Métodos Console API

  • copy()
  • clear()
  • dir()

Hacer del documento contenteditable="true"

  • document.designMode = 'on'

devMode 



*,
*:before,
:after {
    background-color: rgba(255, 0, 0, .15);
}

Muchas gracias!

https://gangsthub.github.io/layout-or-get-out/

npm i && npm start