[Dicionário de front-end] 9 dicas de CSS para melhorar a felicidade

Prefácio

Neste artigo, apresentarei 9 dicas para tornar seu CSS mais conciso e elegante. Essas habilidades são frequentemente usadas por jovens estudantes, e eles as consideram muito eficientes e práticas, então tenho este artigo.

9 dicas CSS

Declaro que o CSS mencionado aqui não inclui apenas CSS, mas também pré-processadores CSS (Less Sass, etc.) Espero que você não se enrede nisso.

O texto começa agora.

1. Tente usar preenchimento em vez de margem

Quando restauramos o rascunho do projeto, o preenchimento e a margem são dois atributos comumente usados, mas sabemos que as margens de duas caixas adjacentes pertencentes ao mesmo BFC se sobreporão, portanto, se as margens forem usadas com muita frequência, a vertical da caixa As distâncias podem se sobrepor.

Outro problema é o bug que o valor margin-top do primeiro elemento filho será adicionado ao elemento pai (a margin-bottom do último elemento filho também tem um problema semelhante). Alguém está perguntando por quê?

A razão é:

a expressão margens recolhidas significa que margens adjacentes (sem conteúdo não vazio, preenchimento ou áreas de borda ou folga as separa) de duas ou mais caixas (que podem estar próximas uma da outra ou aninhadas) se combinam para formar uma única margem.

A tradução é:

As margens de todos os dois ou mais elementos da caixa adjacentes serão mescladas em uma margem compartilhada. Adjacente é definido como: mesmo nível ou elementos de caixa aninhados, e não há conteúdo não vazio, separação de preenchimento ou borda entre eles.

Quanto ao motivo da fusão, pessoalmente acho que é semelhante à distância de segurança para retiradas na fila. A distância de segurança entre as pessoas é de 1m. Se a distância de segurança não for fundida, a distância entre as pessoas será de 2m quando nos alinharmos? Acima. Claro, provavelmente esse não é o motivo.

Portanto, podemos usar preenchimento no primeiro elemento em vez de margem. Claro, às vezes o uso de preenchimento não pode atender às necessidades, então você também pode fazer um alarido sobre a condição de "conteúdo não vazio". Ou seja, adicione um pseudo elemento ao elemento pai.

Portanto, devemos prestar atenção às margens em colapso ao usá-las.

2. posição: problema de downgrade corrigido

Não sei se você já encontrou o efeito teto ou usou a posição: atributo fixo. Na verdade, se transform for usado em seu elemento pai, o efeito de fixed será rebaixado para absoluto.

solução:

Visto que será reduzido para um efeito absoluto, como podemos resolver esse problema? Vamos considerar em quais circunstâncias os efeitos fixos e absolutos no desempenho serão os mesmos.

Ou seja, quando a altura do elemento pai direto usando fixo é igual à altura da tela, os efeitos de desempenho de fixo e absoluto serão os mesmos.

Se o elemento no pai imediato estiver rolando, adicione overflow-y: auto.

3. Use px | em | rem |% e outras unidades razoavelmente

Existem muitas unidades de distância no CSS, como px | em | rem |%, bem como unidades como vh | vw no CSS3.

Então, como devemos usá-lo no projeto? Não precisamos considerar essa complexidade no lado do PC, então aqui falamos principalmente sobre o uso dessas unidades no lado móvel.

Unidade base px

px é a primeira unidade com a qual entramos em contato, mas nossa frequência de uso não é muito alta sob os requisitos de adaptação de extremidade móvel; resumi os seguintes casos de uso:

Padrão relativamente pequeno

Por exemplo, precisamos desenhar um círculo com r sendo 5 px. Se usarmos rem como a unidade, logo descobriremos que o padrão em alguns modelos não é redondo e parecerá elíptico. Isso ocorre devido à perda de precisão ao converter rem em px.

Portanto, neste momento, precisamos usar px e dpr para obter:

// 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;

    }

}

1px problema de linha fina

Falarei sobre esse problema em uma seção separada abaixo, então não entrarei nele aqui.

Tamanho da fonte (basicamente rem é usado como unidade)

Em geral também utilizo rem como unidade de tamanho da fonte, pois a precisão se perde, acho que está dentro de uma faixa aceitável.

Rem unidade relativa

Rem é uma nova unidade relativa (raiz em) adicionada pelo CSS3, que é o valor do tamanho da fonte em relação ao elemento raiz HTML.

Rem deve ser a unidade mais amplamente usada para adaptativo.

Unidade relativa em

em também é uma unidade relativa, mas é relativa ao tamanho da fonte do elemento atual.

altura da linha

Geralmente é recomendado usar em na altura da linha. Porque quando você precisa ajustar o tamanho da fonte, você só precisa modificar o valor de font-size, e a altura da linha foi configurada para a altura da linha relativa.

Recue a primeira linha em dois caracteres

Também usarei esta unidade quando houver necessidade de recuo na primeira linha.

text-indent: 2em

Unidade viewport vw | vh

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

Sabemos que o layout flexível projetado em unidades rem requer que um script seja carregado no cabeçalho para monitorar as mudanças na resolução para alterar dinamicamente o tamanho da fonte do elemento raiz, de modo que CSS e JS sejam acoplados.

Então, há uma solução para esse problema de acoplamento?

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

A seguir está o plano de uso fornecido pelos predecessores:

$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 razoável de variáveis

Geralmente, um determinado tipo de texto (elemento) no rascunho do design usa o mesmo tamanho de fonte, cor, altura da linha e outros atributos de estilo, então não temos que escrever esses valores todas as vezes, porque quando a IU atualiza o design, você precisa mudar Existem muitos lugares. Podemos armazenar esses valores reutilizados em variáveis.

Sass e Less são ligeiramente diferentes:

// sass

$direction: left;

// less

@direction: left;

Claro, existem variáveis ​​em CSS nativamente, e as regras de uso são as seguintes:

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

1. Tanto a definição quanto o uso de variáveis ​​só podem estar no bloco de declaração {}

2. Os limites de caracteres da variável CSS são: [0-9], [a-zA-Z], _, -, chinês e 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. Use o Mixin para classificar padrões repetidos

Como as variáveis ​​repetidas, os padrões repetidos também podem ser classificados. Acho que um dos códigos excelentes deve ser a capacidade de reutilização do código.

Quando escrevemos CSS antes, também colocamos algum código reutilizável em uma classe, que alcançou uma certa capacidade de reutilização, mas o efeito final pode ser colocar muitas classes em um elemento, conforme mostrado na figura a seguir:

Desta forma, a próxima pessoa que assumir ficará inevitavelmente um pouco confusa, o que tornará o estilo cada vez mais difícil de modificar.

Nesse momento, o mixin (pode ser entendido como a turma da aula) pode cumprir seu papel.

Este é um estilo de texto descritivo:

.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 é apenas um exemplo simples. Podemos colocar estilos reutilizáveis ​​no mixin, de modo que a pessoa que assume o projeto só precisa estar familiarizada com o mixin. A menos que você tenha escrito para iniciar a iteração dos requisitos.

6. Esquema de 1px

O front end que fez o terminal móvel definitivamente não deve evitar lidar com o problema da linha fina de 1px. A razão para esse problema é que a IU requer cada vez mais estética de página (não me diga que isso é um problema de tela de retina).

Tanto quanto Xiaosheng sabe, parece não haver solução com compatibilidade particularmente boa. Aqui, apenas apresento duas soluções relativamente boas.

Use pseudoclasse + transformação

.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);

}

Claro, em alguns modelos com versões inferiores, esta solução também terá problemas de compatibilidade, como espessura irregular e linhas finas desaparecendo e quebrando. Mas agora é 2019 e os modelos com versões anteriores estão quase eliminados.

Use simulação de sombra de caixa

.border_bottom {

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

}

Esse esquema pode atender basicamente a todos os cenários, mas há uma desvantagem de que a cor ficará mais clara.

7. Herdar o tamanho da caixa de elementos html

Na maioria dos casos, estamos definindo a borda e o preenchimento do elemento e não queremos alterar a largura e a altura do elemento. Neste momento, podemos definir o tamanho da caixa: border-box; para o elemento.

Não quero reescrever todas as vezes, mas espero que seja herdado, então podemos usar o seguinte código:

html {

  box-sizing: border-box;

}

*, *:before, *:after {

  box-sizing: inherit;

}

A vantagem disso é que ele não sobrescreverá o valor de tamanho de caixa de outros componentes e não há necessidade de definir o tamanho de caixa: caixa de borda; repetidamente para cada elemento.

8. CSS chave embutido para a primeira tela

Há um indicador importante na otimização de desempenho - First Effective Draw (FMP), que se refere ao momento em que o conteúdo principal da página aparece na tela. Este indicador afeta o tempo que os usuários precisam esperar antes de ver a página, e o CSS Crítico em linha (ou CSS Crítico) pode dar aos usuários uma melhor expectativa psicológica.

Como mostrado:

Sabemos que o CSS inline pode fazer com que o navegador inicie a renderização da página mais cedo, ou seja, pode ser renderizado após a conclusão do download do HTML.

Como é o CSS chave inline, isso significa que escreveremos apenas uma pequena parte do código CSS diretamente no HTML. Quanto a qual CSS inserir, você pode usar Critical.

9. O texto excede a omissão e o texto está alinhado em ambas as extremidades

Freqüentemente encontramos essas necessidades em nossas necessidades e fornecemos soluções diretamente aqui.
Além da omissão

.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 será excluído ao usar webpack para empacotar, o motivo é o problema de Optimize-css-assets-webpack-plugin.

solução:

Você pode usar o seguinte texto:

.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;

}

O efeito é o seguinte:

Série de dicionário de front-end

A série "Dicionário de front-end" continuará sendo atualizada. Em cada edição, falarei sobre um ponto de conhecimento que aparece com frequência. Espero que você encontre algum lugar impreciso ou incorreto no texto durante o processo de leitura. Ficarei muito grato; se você conseguir obter algo desta série, ficarei muito feliz.

Se você acha que meu artigo está bem escrito, você pode acompanhar minha conta pública do WeChat, que irá spoiler você antecipadamente.

Você também pode adicionar meu wqhhsd WeChat, bem-vindo para se comunicar.

Próxima prévia

Nos próximos artigos, vou apresentar o Vue relacionado