Recientemente hablamos con Elad Shechter sobre su nuevo reinicio de CSS, poco después de Josh Comeau escribió su blog.
Estamos en una nueva era de reinicio de CSS... ¿no necesitas uno? Ese Hay muchas diferencias en los estilos predeterminados entre los navegadores, y cuando cierras e inicias los estilos, probablemente tengas las cosas en su lugar. Por lo tanto, los restablecimientos de CSS "modernos" probablemente se parezcan más a un conjunto de estilos predeterminados obstinados que hacen las cosas útiles que desea en todos los proyectos nuevos porque así es como se desplaza.
Mirando la elección de Josh, me parece así: una serie de cosas que no son muy persistentes sobre el diseño, pero ayuda Diseña siendo lo que quieres para casi cualquier proyecto.
quiero Pásalo Y publicar sus comentarios calientes.
*, *::before, *::after {
box-sizing: border-box;
}Vaya, sí. Pensamos que era una fiesta mundial. Aunque, a medida que más y más diseños son manejados por grids y flexboxes, encuentro esto un poco inútil en estos días. fr unidades y cosas flexibles, box-sizing El modelo no hace mucho, incluso cuando padding y border participar. Pero bueno, todavía lo prefiero en el acto. Creo que si se restablece CSS, debería usar el modelo de herencia porque es más fácil deshacer el componente.
* {
margin: 0;
}Esta es principalmente la razón por la que existe el logotipo de "estrella" de CSS-Tricks. Me encantó este pequeño fragmento de mi restablecimiento de CSS. Estoy empezando a sentirme abrumado por un tiempo, pero creo que me está empezando a gustar de nuevo. Me gusta lo explícito que tienes que ser al aplicar algunos campos. Personalmente, sacudiría padding: 0; Nuevamente, porque los elementos de la lista tienden a tener algo de relleno que los empuja. Si disparas algo con un arma nuclear, puedes dispararle.
html, body {
height: 100%;
}Probablemente un buen plan. Josh dijo: "Permitir porcentajes basados en aplicaciones". No puedo decir que sea algo que surja a menudo en mi vida diaria, pero hace cosas como el fondo del cuerpo y no llena el espacio como cabría esperar.
tan espantoso body { height: 100vh; } No es suficiente aquí, pero por alguna razón que no recuerdo en este momento, no creo que sea muy confiable. ¿Quizás algo relacionado con la navegación de pie de página en iOS Safari?
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}No puedes ingresar -webkit-font-smoothing: antialiased; algo. Creo que hace que la fuente sea significativamente más delgada, no me gusta. No me importa esto como herramienta, pero no lo aplicaría globalmente en todos mis proyectos.
También me encanta hacer el diseño global. dimensionamiento algo en html selector, solo por la parte "raíz" rem medio <html> elemento - no <body> - Me gusta cambiar el tamaño rem luego ajusta la raíz font-size en el nivel básico de la solicitud de medios.
Ese 1.5 el valor se siente como un buen valor predeterminado line-height (Soy más de 1,4 personas, pero prefiero subir que bajar). Pero una vez que está configurado, me atrae magnéticamente el encabezado, lo que lo reduce. siempre Demasiado Esto es posible a través de h1, h2, h3 pequeño selector (tal vez h4-h6 no es necesario), pero Josh tiene Algunos trucos de CSS funcionan Este fragmento no llega al reinicio final:
* {
line-height: calc(1em + 0.5rem);
}es inteligente 0.5rem Funciona mucho para fuentes pequeñas, pero no mucho para fuentes grandes. Veo intentarlo en el proyecto de nueva creación, el arte previo aquí es de Jesus Ricart en "Use calc para calcular las alturas de fila óptimas".
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}Buen movimiento para restablecer CSS block Escriba la pantalla por ahí para evitar estos molestos line-height El abismo que siempre me mata. Y casi nunca desea que uno de estos bloques de medios sea más ancho que el principal. No lo creo. picture Sin embargo, ¿es esto necesario porque no es realmente un bloque de estilo? Podría estar mal. Puedo tirar iframe y object Y ahí.
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}Definitivamente un buen movimiento. La mala noticia es que cuando una palabra larga (como una URL) obliga a un elemento a expandirse y rompe el diseño, tiendo a arrojarla a algo, como article o .text-content o algo así: déjelo en cascada en toda el área (esto también captura el texto que está en el elemento incorrecto), pero no me importa verlo en un elemento de texto específico.
Si lo hace, es posible que desee tirarlo li, dl, dt, blockquote de este circuito. Aunque se han hecho varios intentos para investigar esto (esto es un patio de recreo), todavía no soy 100% consciente del cóctel correcto, qué atributo para una nueva línea es mejor usar. word-break: break-word; Creo que es básicamente lo mismo. Y creo que por lo general es mejor usar hyphens: auto; ¿exactamente? ?
#root, #__next {
isolation: isolate;
}No entiendo muy bien lo que está pasando aquí. Sé que es React/Next, instalas tu aplicación en estos directorios raíz y sé que crea un contexto de pila, simplemente no veo por qué es particularmente útil tener Organizar el contexto en este nivel. Al mismo tiempo, no veo mucho problema con eso.
En general, ¡genial! Siempre me alegra ver que otras personas usan (o incluso sugieren) restablecer CSS.
Deja una respuesta