Stylefy를 사용하여 Facebook과 유사한 원자 CSS 작성

픽셀이 완벽한 웹 디자인, 원자 CSS, 파손된 선택기와 간단한 출력?예, 그렇습니다.🤩!
얼마 전에 커피 마실 때.☕ 나는 줄곧 페이스북의 CSS를 뒤적거렸다.나는 여러 페이지를 검사했고, 그 중에서 CSS를 다운로드했으며, CSS 작성 방식을 간소화할 수 있는 도구를 생각해냈다.
게으름은 좋은 일이다.그것은 사람들로 하여금 일을 간소화시켰고, 결국 그들은 아무것도 하지 않게 했다.이것 또한 나로 하여금 https://stylify.dev을 창립하게 했다💎.
페이스북 코드를 뒤적였을 때 다음과 같은 내용을 발견했다.
Html:

CSS:

자세히 보면 원자 CSS를 사용하고 선택기를 손상시킬 수 있습니다.
나는 또 페이스북 자체에서 온 Rebuilding our tech stack for the new Facebook.com편의 글을 발견했는데, 그 중에서 그들은 그들이 새로운 페이스북 버전을 위해 어떤 변화를 했는지 설명했다.또 원자 CSS로 전환하기 전에 400KB가 넘는 압축 CSS를 로드했다고 덧붙였다.
내 경험에 따르면 수동으로 CSS를 작성하는 것은 느리고 시간이 걸린다.모든 구성 요소를 변환하기 전에 구성 요소 프레임워크는 매우 훌륭합니다.Tailwind의 JIT는 이미 충분하지만, 나는 내가 사용하고 싶은 선택기를 기억하거나 검색해야 할 때 좋아하지 않는다.규모를 늘리지 않고 기존 프로젝트에 통합할 수 있는 더 작은 블록이 필요합니다.
그래서 목표가 명확하다.다음 기능을 만들 수 있습니다.

CSS는 컨텐츠별

슬롯 선택기

CSS

필요 시 생성
기본적으로

은 네이티브 CSS properties:values을 선택기로

으로 사용

은 독립적으로 작동하며 바인더, 프레임 및 사후/예비 프로세서 필요 없음

스타일링된 원자 CSS

Stylefy는 native preset과 함께 제공되며, 여기서 선택기는 CSS property:value과 같습니다.그렇기 때문에 선택기를 기억하거나 검색할 필요가 없다.이 기기의 미리 설정은 선택할 수 있습니다. 선택기를 정의할 수 있습니다.Stylefy는 다음과 같은 기능도 제공합니다(모든 기능은 나열되지 않음).

작은 블록: 각각 파일, 구성 요소, 레이아웃에 대해 CSS

을 생성할 수 있습니다.

미리 생성된 CSS 없음: 컨텐트

에서 구성 요소 또는 선택기를 찾을 때만 CSS 생성

내부에서 가능한 한 많은 선택기를 조합하고 다시 사용해서 CSS의

을 작게 유지

매크로: m:20px과 같은 사용자 정의 선택기를 정의할 수 있습니다.

화면의 논리적 조작수: 예를 들어 && 및 || 화면 조합의 조작수: sm&&tolg:font-size:24px

선택기 손상: 길이 font-weight:bold에서 짧은 _ab

사전 프로세서, 후면 프로세서 또는 번들 필요 없음

주문형 CSS: CSS는 요청

동안 주문형 번들 가능

은 CSS를 개별적으로 생성할 수 있으며 기본적으로 어떠한 CSS도 가져오지 않기 때문에 전 세계적으로 크기를 늘리지 않고 기존 프로젝트에 쉽게 통합할 수 있다

HTML 작성CSS를 가져옵니다.선택기를 찢다.다 자동이야.

다음 예와 모든 코드는 StackBlitz에서 찾아 편집할 수 있습니다.
다음 예제에서는 간단한 갤러리 이미지 코드가 있습니다.

<div class="
    display:inline-flex
    position:relative
    margin:24px
    overflow:hidden
    box-shadow:0__2px__8px__#000
    width:300px
    md:margin:48px
    md:width:600px
">
    <img class="width:100% object-fit:cover height:auto" src="https://stylify.dev/images/blog/stylify-facebook/mountains.jpg" alt="">
    <div class="
        font-family:arial
        font-weight:bold
        font-size:18px
        position:absolute
        bottom:0
        left:0
        padding:24px
        background:rgba(0,0,0,0.7)
        color:#fff
        md:font-size:32px
    ">
        Zakopané (Poland)
    </div>
</div>

위 코드의 결과는 다음과 같습니다.



만약 순수한 CSS로 작성한다면, 위의 코드는 거의 같아 보일 것이다.box-shadow에만 공백이 아닌 __(밑줄 2개)을 사용합니다.
유지보수성 및 상기 코드가 여러 곳에서 사용할 수 있다는 사실 때문에 중용성을 높일 필요가 있다.구성 요소, 매크로, 변수를 정의합시다.

정리 및 구성

위의 예에서 나는 StackBlitz에서 찾을 수 있는 다음과 같은 초기화를 사용했다. (이것은 index.js에 위치하고 이 환경에서 일하기 위해 경미한 변경을 했다.)

import { Compiler, nativePreset } from '@stylify/stylify';

const content = '';

const compiler = new Compiler(nativePreset.compiler);
const compilationResult = compiler.compile(content);
const css = compilationResult.generateCss();
const mangledContent = compiler.rewriteSelectors(content, compilationResult);

먼저 shadow 변수를 컴파일러 구성에 추가합니다.

nativePreset.compiler.variables: {
    shadow: '0 2px 8px #000'
};

변수를 정의한 후에 우리는 그것을 이렇게 사용할 수 있다: box-shadow:$shadow.
이 기기의 사전 설정은 필수적이지 않다.선택기를 정의할 수 있습니다.예를 들어 이윤율의 경우 다음과 같다.

nativePreset.compiler.macros['m:(\\S+?)'] = (macroMatch, cssProperties) => {
    cssProperties.add('margin', macroMatch.getCapture(0));
};

매크로를 정의하면 m:24px, md:m:48px과 같은 사용자 정의 값과 함께 사용할 수 있습니다.
둘 이상의 동일한 선택기를 여러 위치에서 사용해야 하는 경우 서비스 용이성 및 가독성을 단순화하는 어셈블리를 정의하는 것이 좋습니다.

nativePreset.compiler.components = {
    'gallery-image__wrapper': `
        display:inline-flex
        position:relative
        m:24px
        md:m:48px
        overflow:hidden
        box-shadow:$shadow
        width:300px
        md:width:600px
    `,
    'gallery-image': 'width:100% object-fit:cover height:auto',
    'gallery-image__label': `
        font-family:arial
        font-weight:bold
        font-size:18px
        position:absolute
        bottom:0
        left:0
        padding:24px
        background:rgba(0,0,0,0.7)
        color:#fff
        md:font-size:32px
    `
};

box-sizing:border-box을 추가하는 것도 좋은 방법으로 wtf가 미래의 어느 곳에서 문제가 발생하지 않도록 하는 것이다.

nativePreset.compiler.plainSelectors: {
    '*': 'box-sizing:border-box'
};

위의 모든 향상된 기능을 통해 최종 코드는 훨씬 작아집니다.

<div class="gallery-image__wrapper">
    <img class="gallery-image" src="https://stylify.dev/images/blog/stylify-facebook/mountains.jpg">
    <div class="gallery-image__label">
        Zakopané (Poland)
    </div>
</div>

축소 및 최적화

Stylefy는 엔진 덮개 아래에서 다음과 같은 방법으로 CSS를 최적화합니다.

은 콘텐츠

에서 선택기와 구성 요소를 찾을 때만 생성됩니다.

선택기를 가능한 한 다시 사용하려고 시도합니다

은 font-weight:bold과 같은 긴 선택기를 _ab12과 같은 짧은 선택기로 변환한다

Bellow는 StackBlitz 이미지로 처리 및 최적화된 출력입니다.css(새 줄과 공백 없음) 0.78kb:

너의 생각을 나에게 알려줘!

Stylefy는 1년 동안 개발되었고 첫 번째 버전은 한 달 전에 발표되었다.
나는 어떤 피드백, 문제 또는 생각을 받아도 매우 기쁠 것이다!😊.
연락 유지:
👉
👉
👉 medium.com/@8machy