CSS로 논리 작성-CSS 튜토리얼-php.cn

Escrevendo Lógica em CSS

참고: 방금 아래 텍스트를 번역하여 여기에 게시했습니다. 참고자료는 이 글의 마지막 부분에 있습니다.

CSS는 스타일 시스템에 초점을 맞춘 고도로 전문화된 프로그래밍 언어입니다. 이 단일 사용 사례와 선언적 특성으로 인해 때로는 이해하기 어려울 수 있습니다. 어떤 사람들은 그것이 프로그래밍 언어라는 사실을 부정하기도 합니다. 지능적이고 유연한 스타일 시스템을 프로그래밍하여 그들이 틀렸다는 것을 증명해 봅시다.

제어 구조

보다 전통적이고 범용적인 언어(예: JavaScript)는 "조건"(if/then), "루프"(for, while), "논리 게이트"(===, && 등과 같은 도구를 제공합니다. .) 및 "변수". 이러한 구조는 CSS에서 다르게 이름이 지정되고 문서 스타일 지정의 특정 사용 사례를 더 잘 수용하기 위해 구문이 매우 다르며 일부는 몇 년 전까지만 해도 CSS에서 사용할 수 없었습니다.

변수

변수가 가장 간단합니다. CSS에서는 이를 사용자 정의 속성이라고 합니다(모든 사람이 이를 변수라고 부르지만, 심지어 자신만의 구문도 사용합니다).

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

로그인 후 복사

이중 대시는 변수를 선언하고 값을 할당합니다. 선택기 외부에서 이 작업을 수행하면 CSS 구문이 손상되므로 범위 내에서 발생해야 합니다. 전역 범위로 작동하는 :root 선택기를 참고하세요.

정황

조건은 사용하려는 위치에 따라 여러 가지 방법으로 작성할 수 있습니다. 선택기에는 해당 요소에 대한 범위가 있고, 미디어 쿼리에는 전역 범위가 있으며 자체 선택기가 필요합니다.

속성 선택기:

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

로그인 후 복사

의사 클래스

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

로그인 후 복사

미디어 쿼리:

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

로그인 후 복사

루프

카운터는 CSS에서 가장 직접적인 형태의 루프이지만 사용 사례가 가장 제한된 루프이기도 합니다. 콘텐츠 속성에서만 카운터를 사용하여 텍스트로 표시할 수 있습니다. 특정 지점에서 "증분", "시작점" 및 "값"을 조정할 수 있지만 출력은 항상 텍스트로 제한됩니다.

main {
    counter-reset: section;
}

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

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

로그인 후 복사

하지만 반복 레이아웃 패턴을 정의하기 위해 루프를 사용하고 싶다면 어떻게 해야 할까요? 이 유형의 루프는 좀 더 모호합니다. 그리드의 자동 채우기 속성입니다.

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

로그인 후 복사

이렇게 하면 그리드에 들어갈 수 있는 만큼의 요소가 채워지며, 사용 가능한 공간을 채우기 위해 요소의 크기가 조정되지만 필요한 경우 요소를 여러 줄로 나눕니다. 그리드 항목을 찾고 최소 너비 300px 및 최대 너비를 그리드 컨테이너 크기의 일부로 제한하는 한 반복됩니다. 설명하는 것보다 보는 것이 더 쉬울 것입니다.

그리고 마지막으로 "루프 선택기"가 있습니다. 그들은 매우 정확한 선택을 위한 공식이 될 수 있는 인수를 취합니다.

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

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

로그인 후 복사

정말 특별한 경우에는 다음과 같이 :nth-child()와 :not()을 결합할 수 있습니다.

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

로그인 후 복사

:nth-child()를 :nth-of-type() 및 :nth-last-of-type()으로 대체하여 마지막 예제의 범위를 변경할 수 있습니다.

논리 게이트

Ana Tudor는 CSS Logic Gates에 관한 기사를 썼습니다. 로그인 게이트는 변수를 계산과 결합하는 아이디어를 바탕으로 작동합니다. 그런 다음 그녀는 이를 사용하여 3D 개체를 계속 모델링하고 애니메이션화합니다. 신비한 마법처럼 들리지만, 기사가 진행될수록 훨씬 더 이상해지며, 일반적으로 CSS가 실제로 프로그래밍 언어인 이유를 가장 잘 설명하는 것 중 하나입니다.

기법

올빼미 선택기

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

로그인 후 복사

올빼미 선택기는 항목 뒤에 오는 각 항목을 선택합니다. 여기에 margin-top을 적용하면 그리드 간격처럼 항목 사이에 간격이 효과적으로 추가되지만 그리드 시스템은 없습니다. 이는 또한 더 많은 사용자 정의가 가능하다는 것을 의미합니다. margin-top을 재정의하고 이를 모든 유형의 콘텐츠에 적용할 수 있습니다. 각 항목 사이에 1rem의 공간을 두고 싶지만 제목 앞에는 3rem의 공간이 필요합니까? 그리드에서보다 올빼미 선택기를 사용하면 더 쉽습니다.

Kevin Pennekamp는 자신의 알고리즘을 의사 코드로 설명하는 심층 기사를 작성했습니다.

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.