elm-css를 사용하지 않는 것을 선호하는 이유

..., CSS 모듈, CSS-in-JS, Tailwind 등을 사용할 수 있습니다.

나는 이것에 대해 꽤 오랫동안 생각해 왔지만 Josh W. Comeau의 강연 "CSS를 가르치는 방법"을 보기 전까지는 그것을 명확하게 설명할 수 없었습니다.

Josh가 대화를 시작할 때 나오는 문제를 살펴보겠습니다. 컨테이너에 이미지가 있는데 이미지 아래에 이상한 틈이 있는 것으로 나타났습니다.

흥미로운 점은 JSX나 elm-html을 사용해 작성해도 문제가 지속된다는 점입니다. 따라서 이는 근본적으로 HTML/CSS 문제입니다.

Josh가 찾은 첫 번째 솔루션, 특히 섹션 요소에 line-height: 0을 사용하여 문제를 해결할 수 있습니다. 그리고 해당 솔루션을 elm-css, CSS 모듈, CSS-in-JS 및 Tailwind의 해당 솔루션으로 쉽게 변환할 수 있습니다.

예를 들어 elm-css 사용:

import Css
import Html.Styled as H
import Html.Styled.Attributes as HA

main =
    H.toUnstyled <|
        H.section
            [ HA.css [ Css.lineHeight (Css.px 0) ] ]
            [ H.img [ ... ] [] ]

예를 들어 Tailwind와 함께:

<섹션>



<p>좋습니다. 문제가 해결되었습니다. 다음으로 넘어갑니다. 하지만 기다려라. Josh가 올바르게 지적했듯이 문제를 깊이 이해하면 그것이 문제를 해결하는 최선의 방법이 아니라는 것을 깨닫게 됩니다. 그리고 이를 통해 저는 중요한 통찰력을 얻었습니다.</p>

<h2>
  
  
  주요 통찰력
</h2>

<p>CSS를 추상화하려는 모든 추상화, elm-css, CSS 모듈, CSS-in-JS, Tailwind 등은 그렇게 하지 못합니다. <strong>정신 모델을 변경하지 않기</strong> 스타일 문제에 대해 추론해야 합니다. 확실히 CSS를 사용하기 편리해졌지만 스타일 문제가 발생하면 CSS 작동 방식을 깊이 이해하지 못하는 사람은 해결책을 찾는 데 어려움을 겪게 됩니다.</p>

<p>한발 물러서서 생각해 보세요. 당신은 그러한 기술로 글을 쓰지만 생각은 CSS로 합니다. 당신은해야합니다. 이러한 기술은 기본적인 스타일링 문제를 해결하는 데 아무런 가치가 없습니다. 한 스타일링 솔루션이 다른 스타일링 솔루션보다 나은지 어떻게 결정합니까? 웹의 철학, HTML의 철학, CSS의 철학을 이해해야 합니다. 모든 것이 기술적인 것은 아닙니다. 일을 하는 방법과 이유가 있습니다.</p>

<p>이렇게 생각해 보세요. CSS를 이해하지 못하지만 Richard Feldman보다 Elm에 더 능숙한 개발자가 팀에 합류했다고 가정해 보겠습니다. elm-css를 사용하여 스타일이 지정되고 컨테이너 문제에 이미지가 있는 Elm 뷰를 제공합니다. 유형별로 생각하는 것이 문제에 대한 좋은 해결책을 찾는 데 도움이 될 수 있습니까? 위의 elm-css에 작성한 line-height: 0 솔루션은 유형 검사기를 통과합니다. elm-css는 유형이 안전하기 때문에 더 나은 솔루션을 제공하지 못했습니다. 아니요, 문제의 근본 원인을 파악하고 결국 더 나은 솔루션으로 이어지는 레이아웃 모드에 대해 생각하고 있습니다. 거기에 도달하는 유일한 방법은 Elm이 아닌 CSS로 생각하는 것이었습니다. 근본적으로 CSS 문제입니다.</p>

<p>CSS를 무시하고 싶지만 여전히 배워야 합니다. 그런데 느릅나무는요?</p><h2>
  
  
  느릅나무
</h2>

<p>elmui는 사용할 때 HTML과 CSS 측면에서 생각할 필요가 없기 때문에 정신 모델을 변경합니다. 참신하네요. 인상적이네요. 제가 언급한 다른 기술 중 그 어떤 것도 이에 근접하지 않습니다. 가입하세요, 난 팔렸습니다. 그러나 웹에는 적합하지 않습니다. 웹의 특성에 어긋납니다.</p>

<p>느릅의와 관련하여 제가 가지고 있는 두 가지 주요 문제는 강직과 신성염과 관련이 있습니다. 이는 귀하가 작업하고 있는 도메인의 철학과 해당 커뮤니티가 전체적으로 달성하려고 하는 것이 무엇인지 이해하는 것으로 돌아옵니다. 예를 들어 elm-ui는 아마도 기본 데스크톱 애플리케이션에 적합할 것입니다. 하지만 웹에서는 유동성과 접근성이 너무 높게 평가됩니다.</p>

<p>그런 맥락에서 이 버튼을 웹용 버튼을 구현하는 끔찍한 방법으로 어떻게 판단할 수 있는지 알 수 있나요? 내가 말하는 것을 이해하려고 노력하십시오. 이는 기술적인 문제가 아니라 철학적인 문제입니다. 해당 버튼은 유연성이 없고 접근이 불가능합니다.</p>

<h2>
  
  
  그렇다면 왜 elm-css 등을 사용하지 않는 것을 선호합니까?
</h2>

<p>간단합니다. 그들은 아주 적은 이득으로 더 많은 추상화를 제공합니다. 저는 오래전부터 CSS를 배우는 시간을 가졌습니다. 저는 전문가는 아니지만 BEM과 약간의 유틸리티 수업으로 그럭저럭 지내고 있습니다.</p>

<p>그런데 문제는 이렇습니다. 나는 CSS로 생각하는 방법을 알고 있기 때문에 프로젝트에 필요한 경우 다른 기술을 즉시 선택할 수 있습니다. 다른 기술은 CSS를 다른 방식으로 작성하는 데 도움이 됩니다. 예, 그들이 해결하는 문제가 실제 문제라는 것을 알고 있지만, 특히 최근에는 순수 CSS 솔루션을 대체할 수 있는 아주 좋은 대안이 있습니다.</p>

<p>CSS는 아무데도 가지 않습니다. 오랫동안 웹사이트와 웹 애플리케이션을 구축할 계획이라면 CSS를 깊이 이해하는 데 시간을 투자하는 것은 훌륭한 투자입니다.</p>

<h2>
  
  
  결론
</h2>

<p>elm-css, CSS Modules, CSS-in-JS, Tailwind 등은 훌륭한 기술입니다. 불행히도 CSS를 배우고 깊이 이해해야 할 필요성이 면제되는 것은 아닙니다. 이미 CSS에 능숙하다면 이러한 기술을 사용하는 것이 좋습니다. 특히 Tailwind를 사용하면 UI 프로토타입을 쉽게 만들 수 있습니다. 그러나 CSS를 사용하는 데 어려움을 겪고 속으로 싫어하는 경우 코드와 함께 배치된 스타일을 작성하고 특정성을 피하면서 CSS가 여전히 마음에 있다는 점을 알아 두십시오. CSS의 정신 모델이 너무 약해서 직면하는 모든 근본적인 스타일 문제가 CSS를 더욱 싫어하게 만들 것이라는 점을 제외하면 말입니다. 그 나선에 갇히지 마세요. 대신 CSS를 배우세요.</p>

<h2>
  
  
  내 뉴스레터를 구독하세요
</h2>

<p>Elm을 사용하여 기술을 향상하는 데 관심이 있다면 Elm with Dwayne 뉴스레터를 구독해 보시기 바랍니다. 이에 대해 자세히 알아보려면 이 공지사항을 읽어보세요.</p>


          

            
        

위 내용은 elm-css를 사용하지 않는 것을 선호하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!