Menulis Logik dalam CSS

Nota: Saya baru sahaja menterjemah teks di bawah dan menyiarkannya di sini. Rujukan ada di penghujung artikel ini.

CSS ialah bahasa pengaturcaraan yang sangat khusus yang memfokuskan pada sistem gaya. Oleh kerana kes penggunaan tunggal ini dan sifat deklaratifnya, kadangkala sukar untuk difahami. Sesetengah orang juga menafikan bahawa ia adalah bahasa pengaturcaraan. Mari kita buktikan mereka salah dengan memprogramkan sistem gaya yang bijak dan fleksibel.

Struktur Kawalan

Bahasa yang lebih tradisional dan tujuan umum (seperti JavaScript) memberi kami alatan seperti "Syarat" (jika/maka), "Gelung" (untuk, sementara), "Logical Gates" (===, &&, dsb. .) dan "Pembolehubah". Struktur ini dinamakan secara berbeza dalam CSS, sintaksnya sangat berbeza untuk menyesuaikan kes penggunaan khusus untuk menggayakan dokumen dengan lebih baik dan sesetengah daripadanya tidak tersedia dalam CSS sehingga beberapa tahun yang lalu.

Pembolehubah

Pembolehubah adalah yang paling mudah. Ia dipanggil Sifat tersuai dalam CSS (walaupun semua orang memanggilnya pembolehubah, malah sintaks mereka sendiri).

:root {
    --color: red;
}
span {
    color: var(--color, blue);
}

Sempang berganda mengisytiharkan pembolehubah dan memberikan nilai. Ini perlu berlaku dalam skop kerana melakukan ini di luar pemilih akan memecahkan sintaks CSS. Perhatikan :pemilih akar, yang berfungsi sebagai skop global.

syarat

Syarat boleh ditulis dalam beberapa cara, bergantung pada tempat anda ingin menggunakannya. Pemilih mempunyai skop untuk elemen mereka, pertanyaan media mempunyai skop global dan memerlukan pemilih mereka sendiri.

Pemilih Atribut:

[data-attr='true'] {
    /* if */
}
[data-attr='false'] {
    /* elseif */
}
:not([data-attr]) {
    /* else */
}

Kelas pseudo

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

Pertanyaan Media:

:root {
    color: red; /* else */
}
@media (min-width > 600px) {
    :root {
        color: blue; /* if */
    }
}

gelung

Pebilang ialah bentuk gelung paling langsung dalam CSS, tetapi juga yang mempunyai kes penggunaan paling terhad. Anda hanya boleh menggunakan pembilang pada sifat kandungan, memaparkannya sebagai teks. Anda boleh melaraskan "kenaikan", "titik permulaan" dan "nilai" anda pada mana-mana titik tertentu, tetapi output sentiasa terhad kepada teks.

main {
    counter-reset: section;
}

section {
    counter-increment: section;
    counter-reset: section;
}

section > h2::before {
    content: 'Headline ' counter(section) ': ';
}

Tetapi bagaimana jika anda mahu menggunakan gelung untuk menentukan corak reka letak berulang? Jenis gelung ini lebih kabur sedikit: ia ialah sifat autoisi grid.

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

Ini mengisi grid dengan seberapa banyak elemen yang boleh dimuatkan, sambil menskalakannya untuk mengisi ruang yang tersedia, tetapi memecahkannya kepada beberapa baris apabila perlu. Ia berulang selagi ia menemui item grid dan mengehadkannya kepada lebar minimum 300px dan lebar maksimum sebahagian kecil daripada saiz bekas grid mereka. Ia mungkin lebih mudah untuk dilihat daripada menerangkan:

Dan akhirnya, terdapat "pemilih bergelung". Mereka mengambil hujah, yang boleh menjadi formula untuk memilih dengan sangat tepat.

section:nth-child(2n) {
    /* seleciona todos os elementos pares */
}

section:nth-child(4n + 2) {
    /* seleciona a cada quarto items, iniciando a partir do segundo */
}

Untuk kes yang sangat istimewa, anda boleh menggabungkan :nth-child() dengan :not(), seperti:

section:nth-child(3n):not(:nth-child(6)) {
    /* seleciona a cada 3 elementos, mas não o sexto elemento */
}

Anda boleh menggantikan :nth-child() dengan :nth-of-type() dan :nth-last-of-type() untuk menukar skop contoh terakhir ini.

gerbang logik

Ana Tudor menulis artikel tentang CSS Logic Gates. Log Masuk Gates bekerja pada idea menggabungkan pembolehubah dengan calc. Dia kemudian meneruskan pemodelan dan menganimasikan objek 3D dengan ini. Kedengarannya seperti sihir misteri, ia menjadi lebih gila apabila artikel itu diteruskan, dan secara amnya ia merupakan salah satu penjelasan terbaik mengapa CSS sebenarnya adalah bahasa pengaturcaraan.

Teknik

Pemilih Burung Hantu

* + * {
    margin-top: 1rem;
}

Pemilih Burung Hantu memilih setiap item yang mengikuti item. Menggunakan margin-top untuk ini secara berkesan menambah jurang antara item, seperti grid-gap, tetapi tanpa sistem grid. Ini juga bermakna ia lebih boleh disesuaikan. Anda boleh mengatasi margin atas anda dan menyesuaikannya dengan sebarang jenis kandungan. Ingin mempunyai 1rem ruang antara setiap item, tetapi 3rem sebelum tajuk? Ini lebih mudah dilakukan dengan pemilih burung hantu daripada dalam grid.

Kevin Pennekamp mempunyai artikel yang mendalam tentang perkara ini yang malah menerangkan algoritmanya dalam pseudokod.

Conditional Styling

Podemos criar toggles em nosso código css que ligam e desligam certas regras com variables ​​e calc. Isso nos dá condições muito versáteis.

.box {
    padding: 1rem 1rem 1rem calc(1rem + var(--s) * 4rem);
    color: hsl(0, calc(var(--s, 0) * 100%), 80%);
    background-color: hsl(0, calc(var(--s, 0) * 100%), 15%);
    border: calc(var(--s, 0) * 1px) solid hsl(0, calc(var(--s, 0) * 100%), 80%);
}

.icon {
    opacity: calc(var(--s) * 100%);
    transform: scale(calc(var(--s) * 100%));
}

Dependendo do valor de --s, .box habilitará ou desabilitará seus alert styles.

Automatic contrast colors

Vamos levar a mesma lógica um passo adiante e criar uma color variable que depende do seu contraste com a background color:

:root {
    --theme-hue: 210deg;
    --theme-sat: 30%;
    --theme-lit: 20%;
    --theme-font-threshold: 51%;

    --background-color: hsl(var(--theme-hue), var(--theme-sat), var(--theme-lit));

    --font-color: hsl(
        var(--theme-hue),
        var(--theme-sat),
        clamp(10%, calc(100% - (var(--theme-lit) - var(theme-font-threshold)) * 1000), 95%)
    );
}

Este snippet calcula um background color a partir de valores HSL e uma font color black ou white, invertendo o valor de lightness (luminosidade) do background. Isso por si só pode resultar em baixo contraste de cor (uma fonte cinza de 40% em um background cinza de 60% é praticamente ilegível), então subtrairei um valor threshold (o ponto em que a cor muda de white para black), multiplicarei por um valor insanamente alto como 1000 e farei clamp nele entre 10% e 95%, para obter uma porcentagem de lightness válida no final. Tudo é controlável editando as quatro variáveis ​​no início do snippet.

Este método também pode ser usado para escrever lógica de cores intrincada e themes automáticos, com base apenas em valores HSL.

Limpando as stylesheets

Vamos combinar o que temos até agora para limpar a stylesheet. Ordenando tudo por viewports parece um pouco espaguete, mas ordenar isso por componente não parece nada melhor. Com variables, podemos ter o melhor dos dois mundos:

/* define variables */
:root {
    --paragraph-width: 90ch;
    --sidebar-width: 30ch;
    --layout-s: "header header" "sidebar sidebar" "main main" "footer footer";
    --layout-l: "header header" "main sidebar" "footer footer";
    --template-s: auto auto minmax(100%, 1fr) auto /
        minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
    --template-l: auto minmax(100%, 1fr) auto /
        minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
    --layout: var(--layout-s);
    --template: var(--template-s);
    --gap-width: 1rem;
}

/* manipula variables por viewport */
@media (min-width: 48rem) {
    :root {
        --layout: var(--layout-l);
        --template: var(--template-l);
    }
}

/* realiza o bind no DOM */
body {
    display: grid;
    grid-template: var(--template);
    grid-template-areas: var(--layout);
    grid-gap: var(--gap-width);
    justify-content: center;
    min-height: 100vh;
    max-width: calc(
        var(--paragraph-width) + var(--sidebar-width) + var(--gap-width)
    );
    padding: 0 var(--gap-width);
}

Todas as global variables são definidas no topo e ordenadas por viewport. Essa seção efetivamente se torna a Definition of Behavior, esclarecendo questões como:

• Quais aspectos globais da stylesheet temos? Estou pensando em coisas como font size, colors, medidas repetidas, etc.
• Quais aspectos que mudam frequentemente nós temos? Container widths, Grid layouts e similares vêm à mente.
• Como os valores devem mudar entre as viewports? Quais global styles se aplicam a qual viewport?

Abaixo estão as definições de regras, ordenadas por componente. As Media Queries não são mais necessárias aqui, porque elas já estão definidas no topo e colocadas em variables. Podemos simplesmente codificar em nossas stylesheets sem interrupções neste ponto.

Leando o hash parameter

Um caso especial de pseudo classes é o :target selector, que pode ler o hash fragment da URL. Aqui está uma demonstração que usa essa mecânica para simular uma experiência semelhante a SPA:

Eu escrevi um post sobre isso. Só esteja ciente de que isso tem algumas implicações sérias de acessibilidade e precisa de alguma mecânica JavaScript para realmente ser livre de barreiras. Não faça isso em um live environment.

Definindo Variables ​​em JavaScript

Manipular CSS variables se tornou uma ferramenta muito poderosa agora. Também podemos aproveitar isso em JavaScript:

    // configura --s em :root
    document.documentElement.style.setProperty('--s', e.target.value);

    // configura --s scoped para #myID
    const el = document.querySelector('#myID');
    el.style.setProperty('--s', e.target.value);

    // lê variables de um element
    const switch = getComputedStyle(el).getPropertyValue('--s');

Os exemplos de codepen acima funcionam exatamente assim.

Resumo

CSS é muito capaz de definir layout systems inteligentes e reativos. Suas estruturas de controle e algoritmos podem ser um pouco estranhos em comparação com outras linguagens, mas eles estão lá e estão à altura da tarefa. Vamos parar de apenas descrever alguns styles e começar a fazer eles funcionar.

Fonte

Artigo escrito por Daniel Schulz

Atas ialah kandungan terperinci Menulis Logik dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!