경계 요소 vs CSS 메쉬

8588 단어 webdevbemmaintenancecss
BEM는'명명약정'이 아니다.그것은 Blocks와 Elements 사이의 구분이다.그리고 Modifiers...당분간은 잊어버리자.
오늘 우리는 다른 것에 관심을 가지는 것이 가장 좋다.
그래서 내가 이 글을 쓴 것은 사람들이 BEM 배후의 핵심 원칙을 이해하지 못해서 다른 기능 배후에서 그것들을 볼 수 없기 때문이다.
이것이 바로 우리가 잠시 잊게 하는 이유BEM다.
일을 시작하기 위해서 우리는 모두 동의한다.

CSS 격자가 너무 좋아요.🥳

display block와 display flex 사이의 주요 차이점은 첫 번째 노드는 모든 하위 노드를 하나의 단독 요소로 간주하고 그들의 행위는 하나의 단체와 같다는 것이다.🤜 flex 안에서 그것들은 성장하고 수축할 수 있다.
그것들은 서로 관련되어 있다.
Grid 이러한 연결을 추진하여 더 큰 블록을 처리하고 더 많은 권력과 통제를 제공할 수 있습니다.
그러나 큰 차이가 있다. 정말 큰 차이점이다. 대부분의 권력과 통제권은'망격부노드'가 아니라'망격부노드'에 맡긴다.

격자와 단원 간의 대화를 상상해 봅시다.
🤖: 친애하는 격자 프로젝트, 나는 이미 당신을 위해 한 곳을 준비했습니다. 나의 계획에 따라 당신은 어디에서 살 것입니까?😈
📦: 제 의견이 있을 수 있을까요?
🤖: 친애하는 격자 프로젝트, 그래, 너희들 중 일부는 자신을 다른 곳으로 옮길 수 있지만, 특히 너희들은 아니다😅. 제 틀을 지켜주세요. 제가 확실히 당신에게 계획을 하나 가지고 있으니까요.👮🏻‍♂️.Grid와 마찬가지로 grid template나grid areas를 사용하여 모든 직접 자녀를 통제할 수 있다. BEM도 계획이 있다.

베임이 계획이 있어요.


기술적으로 BEM과Grid의 업무 방식은 같다. 그들은 같은 이데올로기를 가지고 있다.BEM'2d 격자'와 1급 하위 노드에 귀속되지 않았을 뿐입니다.BEM의 관점에서 고려하면 Component Model 더욱 쉽다.
  • 구성 요소 1개Parent와 여러 개Elements

  • 계획Elements에 따라 모두가 알고 있는 위치에 놓아야 한다.
  • 어린이Elements는 생각해서는 안 되고 심지어 그들의 위치를 알아서는 안 된다.
    • const ParentTemplate = () => (
  <html>
    <body>
      <header>
        <slot>
           <Component1 /> <--- Another block
        </slot>
      </header>
      <main>
        <slot>
         <Component2 /> <--- Another block
        </slot>
      </main>
    </body> 
  </html>

    몇몇 규칙


    솔직히 말하면 경계원법에 관한 두 개의 주요 사이트가 있는데, 거기에서 당신은 약간의 정보를 읽을 수 있다. http://getbem.com/ 와 https://en.bem.info/.나는 네가 글자의 행간에 숨겨진 관건적인 정보를 볼 수 있기를 바란다. 그러나 나의 경험에 따르면 아직 아무도 그것을 보지 못했다.

    BEM is not about that-strange__naming--convention
    BEM is about the Separation between B and E


    다음은 당신이 놓칠 수 있는 것입니다.

  • 요소는 자동으로 배치되지 않습니다.부모Block가

  • 자신과 배치는 그들의 아이들뿐이다.

  • 블록은 스타일을 설정할 수 없습니다.🎨 외부 또는 자체 채널Modifiers
    • 제외
  • 개당 Element개Block
    • 가능

    Note: "Children" is not an "immediate DOM node". Still easy to think in React terms - children is everything defined among component


    const List = () => (
 <ul> // children
  <li> // also children
   <SomeItem> // still children, but also a Block
  </li>
 </ul>

    몽땅

    Block 어떻게 어린이를 통치합니까?통상적으로(지난 15년간? BEM은 2006년에 창설된) 추가 전달classname을 통해 상술한 원칙을 준수해야 하며, 사용children에서 정의한modifiers을 제외하고는 양식children을 사용할 수 없다.

    modifiers are equal to (React) props

    Block:
  • Elements를 안에 넣으세요.같은 방식Grid으로 내부Grid-Items 배치가 가능합니다.
  • 서로 다른 수정기/도구를 선택/사용하여 자신의 하위 구성 요소를 설정하지만 하위 구성 요소가 명확하게 지원하는 구성 요소에만 한정됩니다.그래, 너도 Grids BEM에 특정한 것이 아니라 같은 일을 할 수 있어.
    • 보아하니 경계원법과 격자법은 적어도 약간의 공통점이 있는 것 같다.격자는 브라우저 엔진을 제어하는 특정한 방식을 제공하는 '어떻게' 하는지에 관한 것이다.벨🤷‍♂️ 이것은 단지 일을 분명하게 하는 방식일 뿐이다
    Grid와 BEM은 아이들에게 간섭하지 말라고 부드럽게 포석을 정했다.

    While this moment might sounds like NOT something really important - it is the core essence of both technologies


    기술적 실현을 멀리하다.실제 방법의 배후 의도와 원칙을 이해해 보면 이 두 가지 기술은 결국 이렇게 끝난다.

    어떻게

  • (차원) 구성 요소가 자신의 차원을 정의하지 않도록 하세요. - 부급에 따라 계획이 다를 수 있습니다.
  • 와 당신의 부모는 이런저런 방식으로'당신'을 설정하거나 grid(브라우저 레이아웃)에'당신'을 배치하거나 flex 스타일(현식 레이아웃)을 사용하여 당신에게 추가 클래스를 부여합니다.이것은 너의 문제가 아니다.
  • (격차) 구성 부분에서 이윤을 정의하지 마라. 이것은 누구든지 세우려는 질서를 깨뜨릴 수 있다.
  • 페이지의 간격은 여전히 파일입니다. 이를'내부'블록, 즉 당신이 제어하는 구역으로 정의하면'외부'가 아니라 소비자들에게 예상치 못한 행동을 만들어 줍니다.
  • (격리) 다른 구성 요소를 설계하지 말고 무엇을 해야 하는지 알려주기

    • 그럼 어때요?


    따라서 랜덤 코드의 작성을 중지하십시오. 항상 혼란스럽고 유지보수할 수 없는 상태로 끝납니다. 이것은 많은 성능 문제를 초래할 수 있습니다. 특히 만약에 이유 없이 JS에서 CSS를 과도하게 사용한다면.
    구조적으로 사고하다.인간관계에 대해 생각하다.코드, 파일, 함수, 가방에 대해 생각하는 방식으로 당신의 스타일을 생각하세요. 나는 당신이 규칙을 따르고 나쁜 습관 때문에 고통을 겪을 것이라고 믿습니다.
    격자 외에 책임과 관심점 분리 배후의 요점Open Closed Principle을 설명할 수 있는 개념이 하나 더 있는데 SOLID pattern의 일부분이다

    software entities should be open for extension, but closed for modification


    이 경우 블록이 요소에 무엇을 요구하는지(블록은'확장'), 그리고 블록이 요소에 영향을 주지 않는 방법(이 요소들은'수정을 위해 닫힌')을 제어할 수 있다.

    보기:

  • https://non-traditional.dev/encapsulated-css-the-key-to-composable-layouts-94f11c177cc1
  • https://www.joshwcomeau.com/css/styled-components/#isolated-css
  • https://mxstbr.com/thoughts/margin/

    • 기다리다


    당신은 국경원법에 관한 내용을 특별히 읽어야 합니까?
    아니, 왜냐하면:
  • CSSmodules는 명명 모드가 필요하지 않습니다. 특히 JS
    • 의 CSS는
  • 주요한 일은 분리이다. 솔직히 말하면 완전히 같은 분리는 아니다
    • 마지막 점을 기억해라.그물이 어떻게 작동하는지 기억해라.오직 이렇게 해야만 너는 다른 곳에서 국경원법에 관한 정보를 찾을 수 있다.
    한 가지 기억해 주십시오. 위에서 언급한 바와 같이, 절대 다수의 개발자들, BEM을 사용하는 개발자들을 포함해서, "중점을 잡지 못했다."는 것은 이상한 명칭 모델만은 아닙니다.
    분명히 알고 있을 거야.나도 그 안에 있어.
    [프로그래머스/CPP/JS] 게임 맵 최단거리
    Type Script 프로젝트의 CI에서 하는 일

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage