OrganiCSS - 자연스럽게 논리적 CSS를 작성하기 위한 믹스인

2020년 말에 나는 어떻게
CSS Logical Properties Are the Future of the Web & I18N . 그 이후로 저는 새로운 속성을 진정으로 유동적이고 포괄적인 UI를 만들기 위한 다음 단계로 보기 때문에 많이 사용하고 옹호했습니다.

그러나 내가 작업하고 있던 제품에 대한 브라우저 지원 요구 사항이 논리적 속성에 대한 브라우저 지원과 항상 일치하지는 않았습니다. 그래서 저는 물리적 상자 모델 폴백으로 점진적인 향상을 통해 논리적 CSS를 점진적으로 사용할 수 있도록 다양한 믹스인을 작성하고 재사용하기 시작했습니다.
필요할 때.

Styled Components용 믹스인을 처음 작성했습니다. 나중에 동일한 믹스인을 SCSS 프로젝트로 변환해야 했습니다. 그리고 여기에서 OrganiCSS이 태어났습니다.

OrganiCSS

🚀 View OrganiCSS on GitHub

OrganiCSS is a collection of mixins for writing logical CSS in different pre-processors and libraries.

Styled Component만을 위한 믹스인 컬렉션으로 시작된 것이 이제 SCSS, Stylus, Less 및 Emotion을 위한 믹스인 컬렉션입니다.

그렇다면 이 믹스인은 정확히 무엇을 할까요?

OrganiCSS - 스타일 구성 요소

import { Margin, Padding } from '@organicss/styled-components';

const Container = styled.section`
    ${Margin({ inline: 'auto' })};
    ${Padding({ block: 'var(--custom-property-value)' })};
`;

OrganiCSS - SCSS

@import '../node_modules/@organicss/scss';

section {
    @include margin($inline: auto);
    @include padding($block: var(--custom-property-value));
}

이러한 예제는 다음 CSS를 생성합니다.

section {
    margin-inline-end: auto;
    margin-inline-block: auto;
    padding-block-end: var(--custom-property-value);
    padding-block-start: var(--custom-property-value);

    @supports not (margin-inline-end: 1rem) {
        margin-left: auto;
        margin-right: auto;
    }

    @supports not (padding-block-end: 1rem) {
        padding-bottom: var(--custom-property-value);
        padding-top: var(--custom-property-value);
    }
}

An added benefit when using OrganiCSS - Styled Components or Emotion is the TypeScript autocompletion of properties and values.

컴파일된 CSS를 사용하면 논리적 속성에 우선 순위가 지정됩니다. 지원되지 않는 환경에서는 @supports 쿼리가 트리거되고 이에 상응하는 물리적 속성이 폴백으로 사용됩니다. 결국 브라우저 지원이 따라잡고 충분히 광범위해짐에 따라 @supports 쿼리가 더 이상 필요하지 않게 됩니다.

OrganiCSS 범위

OrganiCSS 라이브러리를 만들 때 몇 가지 주요 목표가 있었습니다.

프로젝트 전체에서 API 일관성 유지

에 설명된 모든 논리적 속성 및 값을 지원합니다.
MDN: CSS Logical Properties and Values

믹스인 API

CSS-in-JS 라이브러리에 대한 지원으로 인해 API 규칙은 일반적으로 이상값으로 이 환경에 고정되었습니다.

모든 속성 키는 SCSS의 경우 $ 및 Less의 경우 @와 같은 프로세서별 선행 문자가 포함된 camelCase 명명 규칙을 따릅니다.

// Styled Components, Emotion, Stylus
blockSize, inlineEnd

// SCSS
$blockSize, $inlineEnd

// Less
@blockSize, @inlineEnd

논리적 속성 지원

언급했듯이 목표는 MDN에 따른 모든 논리적 속성과 값을 지원하는 것이었습니다. 해당 지원의 업데이트된 전체 목록은 organics.style에서 찾을 수 있습니다. 각 속성은 border , borderRadius , layout , margin , padding 및 position 범주로 그룹화되며 해당 범주는 OrganiCSS 믹스인이 됩니다.

마무리

이것이 필요합니까? 적어도 나에게는 있었다. 그래서 왜 안돼? 그것이 오픈 소스의 요점이 아닙니까? 바라건대 다른 누군가가 프로젝트를 논리적 속성으로 이동하는 데 유용하다는 것을 알게 될 것입니다.

어느 쪽이든, 나는 이것에 매우 만족합니다.

자원

OrganiCSS

OrganiCSS on Github