Inventar - 깔끔한 프레임 유지

너의 스타일을 깔끔하게 유지하는 것은 매우 어렵다.

너는 결국 색깔과 크기의 중복(또는 더 나쁜 것은, 거의 비슷한 값)을 얻게 될 것이다. 너는 너의 z지수를 추측하고 최선을 다해야 한다. 만약 다른 곳에서 그것을 필요로 한다면 너의 값을 복제해야 한다. 너는 같은 값이 같은 작용을 하는지 확실하지 않다. 지금 네가 해야 할 어떤 변경도 무서운 경험이다.
이러한 해결 방안은 잊혀지거나, 자신의 의견을 고집하는 스타일의 틀과 결합되거나, 실행할 수 없다.
CSS 변수가 야외에서 나타나기 시작하여 일부 문제를 해결할 수 있습니다.그러나 그들 자신에게는 엉망진창일 수도 있다.

이것이 바로 발명가의 용무의 땅이다.

Inventar는 일반 CSS, SASS, 스타일링 구성 요소,Tailwind 또는 다른 스타일링 언어/시스템을 사용하든 한 곳에서 모든 디자인 변수를 관리하는 도구와 시스템입니다.
TypeScript, JavaScript, CSS 변수를 사용할 수만 있다면, Inventar는 당신을 위해 일할 수 있습니다.
기본 예를 살펴보겠습니다.

import makeInventar from 'inventar'

const { jsInventar, cssInventar, inject } = makeInventar({
  warmGray: '#e0ded8',
  blue: '#2233aa',
})

makeInventar 구성을 가져와 jsInventar, cssInventar, inject 및 jsInventar 세 변수를 반환합니다.

cssInventar JS 형식 규약의 구성을 반환합니다.이 구성의 경우 입력과 동일하게 표시됩니다.

  {
    warmGray: '#e0ded8',
    blue: '#2233aa',
  }

inject 동일한 구성을 반환하지만 CSS 변수 서식 적용:

  {
    '--warm-gray': '#e0ded8',
    '--blue': '#2233aa',
  }

injectRoot DOM 요소를 받아들이고 css 변수를 스타일 속성에 추가합니다.사용자 정의 주입 논리를 옵션으로 제공할 수 있습니다. Inventar에는 backgroundColor 함수가 추가되어 있습니다. 이 함수를 가져오고 제공할 수 있습니다.

  const wrapperElement = document.getElementsByClassName('wrapper')[0]
  inject(wrapperElement)

이것은 모든 곳에서 같은 값을 사용할 수 있음을 의미합니다. CSS는 포장 대상에서 주입된 변수를 읽을 수 있고, JS 스타일링 솔루션(또는 스타일 기반 동적 논리)은 JS Inventar 대상을 원본으로 사용할 수 있습니다.

파생 도구는 너로 하여금 무슨 일이 일어났는지 더욱 잘 이해하게 할 수 있다

두 가지 기본 색을 정의한 후에 나는 그것들을 사용하고 싶다.나는 직접 CSS에서 그것들을 사용할 수 있지만, 이것은 왜 모든 곳에서 변수를 사용하는지 이해하기 어렵고, 재구성을 어렵게 할 수 있다.
대신 Inventar에서는 변수를 다른 변수의 함수로 정의할 수 있습니다.

import makeInventar from 'inventar'
import zIndex from 'inventar-z-index'
import tinycolor from 'tinycolor2'

const { jsInventar, cssInventar, inject } = makeInventar({
  warmGray: '#e0ded8',
  blue: '#2233aa',

  backgroundColor: config => config.warmGray,
  linkColor: config => config.blue,
    linkHoverColor: config => tinyColor(config.linkColor).brighten(30).toString(),
})

linkColor, linkHoverColor와 linkHoverColor는 함수를 그 값으로 한다.이것들은 모두 도수입니다. 다른 값에서 값을 내보내는 데 사용됩니다.
이 예에서 설정은 색 정의 (16진수) 에서 그들의 역할 (배경, 링크) 으로 분리되어 있어 이해하기 쉽고 변경하고 재구성하기 쉽다.linkColor는 더 밝은 버전을 만들기 위한 추가 논리를 가지고 있다.문자열이나 숫자만 되돌려주면 모든 계산을 사용할 수 있습니다.
이것이 바로 우리가 얻은 것이다.

{
    warmGray: '#e0ded8',
  blue: '#2233aa',
  backgroundColor: '#e0ded8',
  linkColor: '#2233aa',
  linkHoverColor: '#3b4cc3',
}

변환기는 변수를 생성, 변경 및 삭제할 수 있습니다.

몇 가지 기초 지식을 완성한 후에, 우리는 Inventar를 사용하여 대상 주위의 z 인덱스 값을 저장하려고 한다.
우리는 그것들을 합칠 수 있다...

{
  zIndexHeader: 100,
  zIndexModal: 200,
  zIndexErrorMessage: 300,
}

...그것들을 모두 한 곳에 두는 것이 z 인덱스 값 usual chaos 보다 낫지만, 두 기존 숫자 사이에 새 층을 추가하기 위해 다른 숫자를 변경한 것을 발견할 수 있습니다.변압기는 이것을 완전히 아프지 않은 과정으로 만들 수 있다.
변압기는 발명가의 플러그인이다.그것들은 변수의 이름과 값을 변경하고, 하나 이상의 다른 변수를 되돌려주며, 필요할 때 삭제할 수도 있다.위의 예에서, 우리는 단일 변수에 변압기를 제공했다.여러 개의 변압기를 제공하거나 적용할 수도 있습니다. globally이 예에서, 우리는 inventar-z-index 을 사용하여, 층 이름 그룹을 수신하고, 초기 값과 변수 이름을 사용하여 필요한 변수를 생성할 것이다.

import makeInventar from 'inventar'
import zIndex from 'inventar-z-index'
import tinycolor from 'tinycolor2'

const { jsInventar, cssInventar, inject } = makeInventar({
  warmGray: '#e0ded8',
  blue: '#2233aa',

  backgroundColor: config => config.warmGray,
  linkColor: config => config.blue,
    linkHoverColor: config => tinyColor(config.linkColor).brighten(10).toString(),

  zIndex: { value: 100, transformers: [zIndex(['header', 'modal', 'errorMessage'])] },
})

다음과 같이 종료합니다.

{
    warmGray: '#e0ded8',
  blue: '#2233aa',
  backgroundColor: '#e0ded8',
  linkColor: '#2233aa',
  zIndexHeader: 100,
  zIndexModal: 200,
  zIndexErrorMessage: 300
}

트랜스포머는 잠재적인 용도가 많다. 어떤 경우 값을 삭제하고, 값이나 약속에 따라 이름을 바꾸지만, linting은 그 중 일부일 뿐이다.
이렇게 하면 당신의 스타일 변수를 뚜렷하고 깔끔하게 관리할 수 있는 곳이 생길 것이다.
Inventar는 기존 솔루션보다 많은 이점을 제공합니다.
현재 값이 스타일 해결 방안과 분리되었습니다
...이것은 좋은 일이다!
한 곳에서, 모든 색, 크기, 자원 경로, 그리고 다른 스타일 변수는 어느 곳에서든 사용할 수 있습니다.일반 CSS, SASS, JSS, 스타일링 어셈블리, 순풍 CSS, 인라인 스타일(하지 마세요).CSS 변수를 사용할 수만 있다면 Inventar에서 사용할 수 있습니다.또한 필요한 JS 로직에서도 사용할 수 있습니다.
이것 또한 미래의 재구성이나 양식 언어의 변경을 더욱 쉽게 할 수 있다.
너의 가치관은 지금 한 곳에 있다
단일한 진실한 출처가 있으면 현재 스타일을 실시하는 것이 훨씬 쉽다.아마도 너는 이 때문에 린트 규칙을 쓸 수 있을 것이다.
사물을 명명하는 것은 훨씬 쉽다
여러 곳에 흩어져 있는 단일 색 값이 아니라 이름을 볼 수 있습니다.Inventar 형식은 이름과 캐릭터를 분리하고 어떤 값이 다른 값에서 파생되었는지 정의할 수 있습니다. 그러면 왜 존재하는지, 무엇을 변경해야 하는지 정확하게 알 수 있습니다.
전용 논리의 스타일 값을 쉽게 사용하고 다시 사용할 수 있습니다
작문derivatives과transformers는 매우 간단하다.또한, 만약 누군가가 그들의 파생 제품이나transformer를 발표한다면, 당신의 스타일 언어/시스템이 무엇이든지 사용할 수 있습니다.Inventar는 아주 작은 라이브러리 (본문을 작성할 때 2kb보다 작음) 로 변환기 어댑터로 사용할 수 있습니다.
단점은 다음과 같습니다.
이것은 css 변수를 지원하는 브라우저에만 적용됩니다
CSS variables와 proxies(백그라운드에서 사용)는 광범위하게 지원되지만, Inventar를 Internet Explorer와 Opera Mini와 함께 사용할 수 없습니다.
내가 보고 싶은 것은 개발자와 디자이너 간의 더욱 긴밀한 협력이다.Inventar 설정은 짝짓기 세션에서 하나의 파일을 작성하고 처리할 수 있으며, 많은 경우 두 참여자가 이해할 수 있을 정도로 간단하다.게다가 실시하기 쉽다는 것은 디자이너의 바람과 그들이 결정할 수 있는 미래 변화를 실시하는 데 매우 효과적인 방식이 될 것이라고 나는 믿는다.
미래에 Inventar 설정도 디자이너의 유일한 진실한 출처가 될 수 있다. 소프트웨어의 플러그인이나 같은 파일을 읽고 변경된pull 요청을 제출하는 전용 UI일 수도 있다.
현재 이 프로젝트는 매우 초기 단계에 있다.나는 댓글의 어떤 피드백에도 감사할 것이다:)