Mejoras en el diseño lógico con taquigrafías relativas al flujo.

Admisión: nunca he trabajado en un sitio web que no estuviera en inglés. Trabajó en sitios web que fueron traducidos por otros equipos, pero no tuve mucho que ver con eso. Sin embargo, paso mucho tiempo pensando en términos de elementos a nivel de bloque y nivel de línea. Han pasado un par de años desde que las propiedades lógicas comenzaron a disminuir y definitivamente comenzaron a invadir mi memoria muscular CSS.

Si trabaja en idiomas de arriba a abajo y de izquierda a derecha, como el inglés, como lo hago yo, simplemente asigne la parte superior e inferior blocken su cabeza (probablemente ya lo haga) y la izquierda y la derecha como inline. Entonces, en lugar de height, piensas block-size. En lugar de border-right, piensas border-inline-end. En lugar de padding: 0 1em, piensas padding-inline: 1em. Y en lugar de eso margin-top, piensas margin-block-start.

Tracé esas cosas en otra publicación.

Un problema es que la compatibilidad con el navegador es un poco extraña. Me gusta margin-block-endtrabajar en cualquier lugar donde funcione cualquier propiedad lógica, pero si dices: “Me gustaría establecer tanto el inicio como el final (como margin: 1rem 0), así que usaré solo margin-block”, bueno, eso no No funciona en algunos navegadores (todavía). Eso tiene cierto sentido, porque no existe una “asignación directa” de margin-blockninguna propiedad CSS exlógica. Hay suficientes otras advertencias pequeñas como esa, lo que me hace un poco aprensivo a la hora de usarlos en todas partes.

Aún así, probablemente empezaré a usarlos mucho más, ya que incluso si todavía trabajo principalmente en sitios en inglés, me gusta la idea de que si los uso constantemente, traducir cualquier sitio en el que trabajo a idiomas que no sean No es mucho más fácil de izquierda a derecha y de arriba a abajo. Sin mencionar que simplemente me gusta el modelo mental de pensar en las cosas como bloques y en línea.

Estoy tratando de vincular el artículo de Adam Argyle y Oriol Brufau aquí, así que permítanme terminar con una cita del mismo, aclarando por qué el uso de propiedades no lógicas solo tiene sentido para un “estilo de lenguaje”:

En inglés, las letras y las palabras fluyen de izquierda a derecha mientras que los párrafos se apilan de arriba a abajo. En chino tradicional, las letras y palabras están apiladas de arriba a abajo, mientras que los párrafos se apilan de derecha a izquierda. Sólo en estos 2 casos, si escribimos CSS que pone “margen superior” en un párrafo, solo estamos espaciado apropiadamente 1 estilo de idioma. Si la página se traduce del inglés al chino tradicional, es posible que el margen no tenga sentido en el nuevo modo de escritura vertical.