[Diccionario front-end] 9 consejos CSS para mejorar la felicidad

Prefacio

En este artículo, presentaré 9 consejos para hacer que su CSS sea más conciso y elegante. Estas habilidades las utilizan a menudo los estudiantes jóvenes y les resulta muy eficaz y práctica, así que tengo este artículo.

9 consejos CSS

Por la presente declaro que el CSS mencionado aquí no solo incluye CSS, sino que también incluye preprocesadores de CSS (Less Sass, etc.). Espero que no se quede atascado en esto.

El texto comienza ahora.

1. Intente utilizar relleno en lugar de margen

Cuando restauramos el borrador del diseño, el relleno y el margen son dos atributos de uso común, pero sabemos que los márgenes de dos cajas adyacentes que pertenecen al mismo BFC se superpondrán, por lo que si los márgenes se usan con demasiada frecuencia, la vertical de la caja Las distancias pueden superponerse.

Otro problema es el error de que el valor margin-top del primer elemento secundario se agregará al elemento principal (el margin-bottom del último elemento secundario también tiene un problema similar). ¿Alguien está preguntando por qué?

La razón es:

la expresión márgenes colapsados ​​significa que los márgenes adyacentes (sin contenido no vacío, áreas de relleno o borde o espacio libre los separan) de dos o más casillas (que pueden estar una al lado de la otra o anidadas) se combinan para formar un margen único.

La traducción es:

Los márgenes de todos los dos o más elementos de cuadro adyacentes se fusionarán en un margen compartido. Adyacente se define como: elementos de cuadro anidado o del mismo nivel, y no hay contenido no vacío, relleno o separación de bordes entre ellos.

En cuanto al motivo de la fusión, personalmente creo que es similar a la distancia de seguridad para las retiradas en cola. La distancia de seguridad entre las personas es de 1 m. Si la distancia de seguridad no se fusiona, ¿será la distancia entre las personas de 2 m cuando hagamos fila? Arriba. Por supuesto, probablemente esta no sea la razón.

Entonces podemos usar relleno en el primer elemento en lugar de margen. Por supuesto, a veces el uso de relleno no puede satisfacer las necesidades, entonces también puede hacer un escándalo por la condición de "contenido no vacío". Es decir, agregue un pseudo elemento al elemento principal.

Por tanto, debemos prestar atención al colapso de los márgenes cuando se utilizan márgenes.

2. posición: problema de degradación fijo

No sé si alguna vez se encontró con el efecto de techo o si utilizó el atributo posición: fijo. De hecho, si se usa transform en su elemento padre, el efecto de fixed se degradará a absoluto.

solución:

Dado que se degradará a un efecto absoluto, ¿cómo podemos resolver este problema? Consideraremos bajo qué circunstancias los efectos de rendimiento fijos y absolutos serán los mismos.

Es decir, cuando la altura del elemento principal directo que usa fijo es la misma que la altura de la pantalla, los efectos de rendimiento de fijo y absoluto serán los mismos.

Si el elemento del padre inmediato se desplaza, agregue overflow-y: auto.

3. Utilice px | em | rem |% y otras unidades razonablemente

Hay muchas unidades de distancia en CSS, como px | em | rem |%, así como unidades como vh | vw en CSS3.

Entonces, ¿cómo deberíamos usarlo en el proyecto? No necesitamos considerar esta complejidad en el lado de la PC, por lo que aquí hablamos principalmente sobre el uso de estas unidades en el lado móvil.

Unidad base px

px es la primera unidad con la que entramos en contacto, pero nuestra frecuencia de uso no es muy alta bajo los requisitos de adaptación final móvil; he resumido los siguientes casos de uso:

Patrón relativamente pequeño

Por ejemplo, necesitamos dibujar un círculo con r de 5px. Si usamos rem como unidad, pronto encontraremos que el patrón en algunos modelos no es redondo y parecerá elíptico. Esto se debe a la pérdida de precisión al convertir rem a px.

Entonces, en este momento, necesitamos usar px con dpr para lograr:

// less 

/*@size 建议取双数*/

.circle(@size, @backgroundColor) {  

    width: @size;

    height: @size;

    background-color: @backgroundColor;

    [data-dpr="1"] & {

        width: @size * 0.5;

        height: @size * 0.5;

    }

    [data-dpr="3"] & {

        width: @size * 1.5;

        height: @size * 1.5;

    }

}

Problema de línea delgada de 1 px

Hablaré de este problema en una sección separada a continuación, por lo que no entraré en él aquí.

Tamaño de fuente (básicamente se usa rem como unidad)

En general también utilizo rem como unidad de tamaño de fuente, porque se pierde la precisión, creo que está dentro de un rango aceptable.

Unidad relativa rem

Rem es una nueva unidad relativa (raíz em) agregada por CSS3, que es el valor del tamaño de fuente relativo al elemento raíz HTML.

Rem debería ser la unidad de adaptación más utilizada.

Unidad relativa em

em también es una unidad relativa, pero es relativa al tamaño de fuente del elemento actual.

altura de la línea

Por lo general, se recomienda utilizar em en altura de línea. Porque cuando necesita ajustar el tamaño de la fuente, solo necesita modificar el valor del tamaño de la fuente y la altura de la línea se ha establecido en la altura relativa de la línea.

Aplicar sangría a la primera línea con dos caracteres

También utilizaré esta unidad cuando sea necesario realizar una sangría en la primera línea.

text-indent: 2em

Unidad de ventana vw | vh

vw: 1vw = 视口宽度的 1%
vh: 1vh = 视口高度的 1%

Sabemos que el diseño flexible diseñado en unidades rem requiere que se cargue un script en la cabeza para monitorear los cambios en la resolución para cambiar dinámicamente el tamaño de fuente del elemento raíz, de modo que CSS y JS estén acoplados.

Entonces, ¿hay una solución a este problema de acoplamiento?

答案就是视口单位 vw | vh。

El siguiente es el plan de uso proporcionado por los predecesores:

$vm_fontsize: 75;

@function rem($px) {

     @return ($px / $vm_fontsize ) * 1rem;

}

$vm_design: 750;

html {

    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 

    @media screen and (max-width: 320px) {

        font-size: 64px;

    }

    @media screen and (min-width: 540px) {

        font-size: 108px;

    }

}

// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小

body {

    max-width: 540px;

    min-width: 320px;

}

4. Uso razonable de variables

Por lo general, un determinado tipo de texto (elemento) en el borrador del diseño utiliza el mismo tamaño de fuente, color, altura de línea y otros atributos de estilo, por lo que no tenemos que escribir estos valores cada vez, porque cuando la interfaz de usuario actualiza el diseño, es necesario cambiar Hay muchos lugares. Podemos almacenar estos valores reutilizados en variables.

Sass y Less son ligeramente diferentes:

// sass

$direction: left;

// less

@direction: left;

Por supuesto, existen variables en CSS de forma nativa y las reglas de uso son las siguientes:

变量定义的语法是： --； // *为变量名称。
变量使用的语法是：var()；

1. Tanto la definición como el uso de variables solo pueden estar en el bloque de declaración {}

2. Los límites de caracteres de las variables CSS son: [0-9], [a-zA-Z], _, -, chino y coreano, etc.

    :root {

        --blue_color: #3388ff;

        --main_bgcolor: #fafafa;

        --font_size_12: 12px;

        --font_size_14: 14px;

        --color: 20px;

    }

    .div1{

        background-color: var(--main_bgcolor);

        font-size: var(--font_size_12);

    }

5. Utilice Mixin para clasificar patrones repetidos

Al igual que las variables repetidas, los patrones repetidos también se pueden clasificar. Creo que uno de los códigos excelentes debe ser la reutilización del código.

Cuando escribimos CSS antes, también pusimos algo de código reutilizable en una clase, lo que logró cierta reutilización, pero el efecto final puede ser poner muchas clases en un elemento, como se muestra en la siguiente figura:

De esta forma, la próxima persona que se haga cargo inevitablemente estará un poco confundida, y esto hará que el estilo sea cada vez más difícil de modificar.

En este momento, mixin (puede entenderse como la clase en clase) puede desempeñar su papel.

Este es un estilo de texto descriptivo:

.font-description {

    .font-des-style(24px,#fff,1.5em);

    .line-camp(2);

}

// less

/* 多行显示 */

.line-camp( @clamp:2 ) {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: @clamp;

    -webkit-box-orient: vertical; 

}

.font-des-style( @fontSize, @color, @lineHeight, @textAlign:left ) {

    font-size: @fontSize;

    color: @color;

    line-height: @lineHeight;

    text-align: @textAlign;

}

Este es solo un ejemplo simple. Podemos poner estilos reutilizables en el mixin, de modo que la persona que se hace cargo del proyecto solo necesita estar familiarizado con el mixin, a menos que haya escrito para comenzar a iterar los requisitos.

6. esquema de 1 px

La interfaz que ha hecho el terminal móvil definitivamente no debe evitar lidiar con el problema de la línea delgada de 1px. La razón de este problema es que la interfaz de usuario requiere cada vez más estética de página (no me digas que esto es un problema de pantalla retina).

Por lo que Xiaosheng sabe, parece que no hay una solución con una compatibilidad particularmente buena. Aquí solo proporciono dos soluciones relativamente buenas.

Usar pseudo-clase + transformar

.border_bottom { 

    overflow: hidden; 

    position: relative; 

    border: none!important; 

}

.border_bottom:after { 

    content: ".";

    position: absolute; 

    left: 0; 

    bottom: 0; 

    width: 100%; 

    height: 1px; 

    background-color: #d4d6d7; 

    -webkit-transform-origin: 0 0;  

    transform-origin: 0 0; 

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

}

Eso sí, en algunos modelos con versiones inferiores, esta solución también tendrá problemas de compatibilidad como espesores desiguales y líneas finas que desaparecen y se rompen. Pero ahora es 2019, y los modelos con versiones inferiores están casi eliminados.

Usar simulación de sombra de caja

.border_bottom {

  box-shadow: inset 0px -1px 1px -1px #d4d6d7;

}

Este esquema puede cumplir básicamente con todos los escenarios, pero existe el inconveniente de que el color se volverá más claro.

7. Heredar el tamaño de la caja de los elementos html

En la mayoría de los casos, estamos configurando el borde y el relleno del elemento y no queremos cambiar el ancho y la altura del elemento. En este momento, podemos configurar box-sizing: border-box; para el elemento.

No quiero volver a escribirlo cada vez, pero espero que se herede, entonces podemos usar el siguiente código:

html {

  box-sizing: border-box;

}

*, *:before, *:after {

  box-sizing: inherit;

}

La ventaja de esto es que no sobrescribirá el valor de tamaño de caja de otros componentes, y no es necesario establecer el tamaño de caja: border-box; repetidamente para cada elemento.

8. CSS clave en línea para la primera pantalla

Hay un indicador importante en la optimización del rendimiento: el primer sorteo efectivo (FMP), que se refiere al momento en que el contenido principal de la página aparece en la pantalla. Este indicador afecta el tiempo que los usuarios deben esperar antes de ver la página, y el CSS crítico en línea (o CSS crítico) puede brindar a los usuarios una mejor expectativa psicológica.

Como se muestra:

Sabemos que el CSS en línea puede hacer que el navegador inicie el procesamiento de la página antes, es decir, se puede procesar después de que se complete la descarga de HTML.

Dado que es el CSS clave en línea, significa que solo escribiremos una pequeña parte del código CSS directamente en el HTML. En cuanto a qué CSS insertar, puede usar Critical.

9. El texto excede la omisión y el texto está alineado en ambos extremos.

A menudo encontramos tales necesidades en nuestras necesidades y proporcionamos soluciones directamente aquí.
Más allá de la omisión

.line-camp( @clamp:2 ) {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: @clamp;

    -webkit-box-orient: vertical; 

}

Problemas encontrados:

-webkit-box-orient: vertical Este código se eliminará al usar webpack para empaquetar, la razón es el problema de optimizar-css-assets-webpack-plugin.

solución:

Puede utilizar la siguiente redacción:

.line-camp( @clamp:2 ) {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: @clamp;

    /*! autoprefixer: off */

    -webkit-box-orient: vertical;

    /* autoprefixer: on */

}

Justificado

// html

<div>姓名</div>

<div>手机号码</div>

<div>账号</div>

<div>密码</div>

// css

div {

    margin: 10px 0; 

    width: 100px;

    border: 1px solid red;

    text-align-last: justify;

}

El efecto es el siguiente:

Serie de diccionarios front-end

La serie "Diccionario de interfaz de usuario" seguirá actualizándose. En cada número, hablaré de un punto de conocimiento que aparece con frecuencia. Espero que encuentres algún lugar impreciso o incorrecto en el texto durante el proceso de lectura, te estaré muy agradecido, si puedes ganar algo con esta serie, también estaré muy feliz.

Si crees que mi artículo está bien escrito, puedes seguir mi cuenta pública de WeChat, que te estropeará por adelantado.

También puede agregar mi WeChat wqhhsd, bienvenido a comunicarse.

Siguiente vista previa

En los próximos artículos presentaré Vue relacionados