표준 프레임워크에서 ITCSS 및 BEM까지

주기적으로 나는 일반적으로 프론트 엔드 개발자라는 직업에서 하고 있는 일에 대해 내 수준에서 요점을 밝히고 오늘날 가장 큰 혁명은 표준 프레임워크를 포기한 것임을 깨닫습니다.

몇 년 동안 나는 많은 회사와 웹 에이전시에서 일반적으로 유행하는 기술과 시장에서 요구하는 솔루션으로 일했습니다. 특히 인터페이스에서 작업하면서 Bootstrap과 jQuery를 많이 사용했습니다.
기능적 레이아웃을 빠르고 쉽게 구축할 수 있었지만 구조를 사용자 정의하고 디자이너 목업으로 픽셀을 완벽하게 만드는 것은 실망스러웠습니다.

SCSS와 Gulp와 같은 현대 기술의 흐름을 따라 쉽게 원자 CSS를 발견하게 되었습니다.
요구되는 것과 가장 유사한 부스트랩 구조를 찾지 않고, 설계 시스템 사양으로 충실하게 구축하는 것이 혁명적인 측면이었습니다!

Coding with the simple concept of atomic CSS was not enough, it was necessary to know how to organize, structure and recall it.
ITCSS and BEM were the solutions to this block!

프레임워크의 구조화에는 참조로 디자인 시스템이 필요합니다. padding , margin , colors , fonts은 조화와 일관성을 보장하는 가장 중요한 정의 중 하나입니다.utilities , components , objects , elements , tools 및 settings 과 같은 클래스를 구성하려면 정신적으로 기능을 구성하고 특정성을 구성할 수 없습니다.

드롭다운과 같은 구성 요소의 구성은 간단하고 빨라집니다. 유틸리티 클래스만 호출하면 구성 요소 개발이 일반적으로 80% 완료되지만 때로는 더 "선언적"으로 작성한 다음 추가로 properties을 작성해야 합니다. . 이 경우 BEM 대류를 이용하고 구성요소를 수정자로 요소 및 변형이 있는 블록으로 간주하는 것이 유용합니다.

아직 개발 중인 프로젝트에서 이러한 접근 방식과 도구를 사용하면 자연스러운 결과를 볼 수 있었습니다.

훨씬 더 짧은 컴파일된 CSS, 매우 적은 수의 선언

브라우저에 대한 로드 및 읽기의 더 가벼운 CSS

더 완전한 DOM이지만 로드하기 더 쉬운 CSS 속성이 있습니다.

동료들과 함께 개발한 프레임워크는 편집 프로젝트용으로 생각되어 왔지만 분명히 구성 요소를 제외하고 다른 종류의 프로젝트를 위해 쉽게 확장 가능하고 양도할 수 있다고 생각합니다.

다음은 버튼 구성 요소에 대한 마지막 프로젝트의 코드로, HTML이 얼마나 더 길어질 수 있는지 보여줍니다.

<button class="c-btn c-btn--{{modifier}} {% if rounded %}c-btn--rounded{% endif %} {% if link %} c-btn--link {% endif %}{% if size=='large' %}c-btn--large u-label-04{% elif size=='small' %} c-btn--small u-label-05{% else %}u-label-04{% endif %} {% if iconleft %}u-row-reverse{% endif %} u-cursor-pointer u-flex u-items-center u-label-04" {% if disabled %}disabled{% endif %}>
  {{ label }} 
  {% if icon %}
    <svg class="o-icon {% if label %}{% if iconleft %}u-mr-xxsmall {% else %} u-ml-xxsmall{% endif %}{% endif %} 
    {% if size=='large' %}o-icon--md{% elif size=='small' %}o-icon--sm{% else %}o-icon--md{% endif %} ">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{ icon }}"></use>
    </svg>
  {% endif %}
</button>

그러나 이 접근 방식을 권장하면 다음과 같은 몇 가지 유효한 프레임워크가 있습니다.

https://tailwindcss.com/

https://tachyons.io/

https://bulma.io/

IMHO 확실히 좋은 시간 투자!