Las reglas media queries (también denominadas MQ a veces) son un tipo de reglas de CSS que permiten crear un bloque de código que sólo se procesará en los dispositivos que cumplan los criterios especificados como condición.

La sintaxis de la regla @media es la siguiente:

@media (<condición>):
Si se cumple la condición, se aplican los estilos de su interior.
@media not (<condición>):
Si no se cumple la condición, se aplican los estilos de su interior.

Básicamente, se trata de establecer una condición que se aplicará a la página actual, y en el caso de cumplirse, se aplicarán los estilos indicados en su interior. De no cumplirse, no se aplicarán.

Tipos de medios:

En algunas ocasiones, queremos indicar que las reglas @media sólo se pongan en funcionamiento en determinados tipos de dispositivos. Son los llamados tipos de medios. Existen los siguientes:

Tipo de medio
all | Todos los dispositivos o medios. El que se utiliza por defecto.
screen | Monitores o pantallas de ordenador. Es el más común.
print | Documentos de medios impresos o pantallas de previsualización de impresión.
speech | Lectores de texto para invidentes (Antes aural, el cuál ya está obsoleto).

En los ejemplos anteriores hemos indicado *condiciones* en el interior de los paréntesis, pero no hemos visto como definir ninguna. Vamos a echar un vistazo a que tipo de características podemos definir en las condiciones de los media queries.

Podemos utilizar las siguientes:

width |  | Si el dispositivo tiene el tamaño de ancho exactamente.
min-width |  | Si el dispositivo tiene un tamaño de ancho mayor al indicado.
max-width |  | Si el dispositivo tiene un tamaño de ancho menor al indicado.
height |  | Si el dispositivo tiene el tamaño de alto exactamente.
min-height |  | Si el dispositivo tiene un tamaño de alto mayor al indicado.
max-height |  | Si el dispositivo tiene un tamaño de alto menor al indicado.
aspect-ratio | aspect-ratio | Si el dispositivo encaja con la proporción de aspecto indicada.
orientation | landscape | portrait | Si el dispositivo está en colocado en modo vertical o apaisado.

Existen otras características que en algunos casos pueden ser interesantes, como por ejemplo scan, update, resolution, monochrome, grid, color-index, color, color-gamut, dynamic-range, etc...

Qué es una declaración de CSS

Una declaración de CSS es un bloque que especifica el conjunto de estilos que se añadirán a un elemento HTML. Su estructura contiene lo siguiente:

Los comentarios de CSS consisten en señalar algo que se ignorará. Para establecer un comentario CSS se lo envuelve entre /* y */, independiente de la cantidad de líneas.

Antes de empezar con CSS utilizaremos algunas propiedades de CSS.

Estas son las medidas iniciales que debes conocer para establecer tamaños de elementos o de tipografía:

Las propiedades CSS más usadas son las siguientes, separadas en secciones comunes, algunas ya las conocemos:

También, si deseas conocer todas las etiquetas existentes, puedes revisar el sitio web CSS Reference.

Propiedades de textos

Las propiedades para manipular los textos y tipografía son los siguientes:

Bordes redondeados

La propiedad que establece bordes redondeados es: border-radius.

Fuente: https://coda.io/@maria-perez/css

Las pseudoclases CSS son palabras clave que podemos añadir a los selectores para identificar un estado en nuestros elementos HTML. Esto quiere decir que los podemos insertar cuando queremos estilizar un elemento que se encuentre en un estado específico. Lo que nos permiten las pseudoclases CSS es identificar elementos no solo de acuerdo al árbol del código, cómo lo hacen los selectores básicos y selectores múltiples de CSS, pero también de acuerdo a factores como el historial de navegador y el movimiento del ratón.

A continuación, te presentamos algunas de las pseudoclases CSS y los estados que seleccionan al insertarse en un selector.

Hay muchas más pseudoclases en CSS. Si quieres conocer cada una de ellas a profundidad, te recomendamos visitar el post sobre pseudoclases en la página oficial de la Mozilla Developer Network.

Al igual que las pseudoclases en CSS, los pseudoelementos en CSS nos permiten ser más específicos a la hora de seleccionar a qué le vamos a aplicar un estilo. A diferencia de las pseudoclases, los pseudoelementos en CSS no identifican un estado, sino que identifican puntos o lugares concretos dentro de un elemento HTML. A continuación, te presentamos los pseudoelementos en CSS más importantes:

Cuando hablamos de la Cascada CSS nos referimos al algoritmo (conjunto de reglas y normas) que tiene el navegador para aplicar estilos CSS a un elemento HTML. No es tan sencillo como la mayoría cree, ya que hay múltiples casos donde pueden existir ambigüedades, y el navegador debe resolverlas para saber que estilo debe aplicar primero y cuál después.

Imagina que tenemos enlazados dos archivos .css mediante <link> y en cada uno tenemos un mismo selector .text aplicando colores diferentes. ¿Cuál de los dos se aplicará finalmente? Quizás pienses que el último que haya sido definido. A veces, esto es cierto, pero muchas otras veces no.

La cascada comprende varios temas importantes a la hora de resolver dichos conflictos:

El navegador tiene un sistema llamado Especificidad CSS, donde en situaciones de conflicto como esta, calculará que selector es más específico, siguiendo unas ciertas normas. Esto se suele representar con 3 cifras, separadas por comas: A,B,C.

Componente A | Número de veces que aparece un #id en el selector.
Componente B | Número de veces que aparece una .clase, [atributo] o :pseudoclase en el selector.
Componente C | Número de veces que aparece un elemento o un ::pseudoelemento en el selector.

Fuente:https://lenguajecss.com/css/cascada-css/que-es-cascada/#especificidad-css

Para explicarlo de manera sencilla, y simplificando, ciertas etiquetas HTML no afectan en absoluto al flujo de los demás elementos, limitándose a marcar ciertos fragmentos con una determinada semántica y dejando que el texto y otros elementos contiguos sigan fluyendo en la misma línea, colocándose a ambos lados de dicho elemento.

Ejemplos de estas etiquetas son: <a>, <em>,<del>... y quizá la más útil de todas: la etiqueta <span>, que se usa para envolver elementos en-línea para darles estilo sin cambiar su comportamiento. A estos elementos HTML se les llama elementos de línea o, incluso más a menudo, por su denominación en inglés: elementos "inline".

Elementos de bloque

Por el contrario, ciertas etiquetas se renderizan en el navegador en líneas independientes, no mezcladas con el resto del texto.  Ejemplos de estas etiquetas son los encabezados (<h1> hasta <h6>), las citas en bloque (<blockquote>), por supuesto los párrafos (<p>), y quizá la más conocida de todas que es la etiqueta <div> usada normalmente para envolver a otros elementos. A estos elementos se les denomina elementos de bloque.

Es decir, ahora los elementos no fluyen como si fueran texto, sino que por defecto se renderizan en líneas independientes. Además, los elementos de bloque respetan los anchos y altos y los márgenes verticales.

Así por ejemplo, aunque tengamos una etiqueta span que se renderiza en línea por defecto, si le aplicamos la propiedad display:block; se renderizará como un bloque, es decir, sería exactamente igual que si hubiésemos puesto un <div>.

El tercer valor de la lista anterior es muy interesante ya que permite obtener un comportamiento intermedio entre los otros dos. Los elementos inline-block fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales. Son lo mejor de los dos mundos.

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

También he configurado la propiedad wrapflex-wrap , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

Fuente: https://developer.mozilla.org/es/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods

 

Una vez que se hayan definido todos los “átomos” a usar, entonces se pasa a estructurar las moléculas o bien la creación de componentes sencillos, generalmente con un uso específico en nuestra página y posiblemente reutilizable. Por ejemplo, la unión de un “átomo” de label, un “átomo” de input, un “átomo” de button, un “átomo” de un color específico y un “átomo” de font, pueden unirse para crear una “molécula” de barra de búsqueda. Así es cómo, según lo explica Frost, podemos eventualmente definir organismos (regiones definidas de una página) y eventualmente, plantillas y páginas.

 

 

La teoría que sigue el Atomic Design es que, al empezar desde el elemento más pequeño, podemos ir construyendo de forma sistemática componentes más grandes y complejos sin recurrir a la necesidad de repetir código y, por ende, tener una hoja de presentación más fácil de manejar y mantener. También es interesante mencionar que el Atomic Design tiene una excelente sinergia con Sass y Scss, aprovechando sus poderosas funcionalidades de extensión y herencia para construir moléculas y componentes más grandes de forma fácil y rápida. De hecho, ya existen frameworks basados en Atomic Design, como Pattern Lab.

 

Definitivamente, la metodología de Atomic Design puede parecer desalentadora y, para algunos, difícil de implementar en su estructura de diseño; sin embargo, mantiene una premisa muy funcional y fácil de entender. En mi siguiente blog, veremos cómo implementar Pattern Lab en nuestro proyecto para adoptar el Atomic Design y primeras impresiones sobre el framework.

Fuente: https://rootstack.com/es/blog/una-forma-diferente-de-estructurar-tu-css-atomic-design