우아하고 내구성이 뛰어난 CSS 코드를 작성하는 방법은 무엇입니까? CSS 이름 지정 팁을 공유합니다!

CSS를 한동안 사용해 본 적이 있다면 상속, 특이성, 이름 지정이 가장 다루기 어려운 일이라는 것을 알고 계실 것입니다. 모든 CSS는 전역적이므로 코드베이스가 커짐에 따라 스타일이 서로 충돌하고 의도하지 않은 부작용을 일으키는 것을 방지하는 것이 점점 더 어려워집니다! 다음 기사에서는 코드를 우아하고 매력적으로 만드는 몇 가지 CSS 이름 지정 팁을 공유하겠습니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

CSS 이름 지정 - BEM

BEM이란 무엇입니까

BEM은 CSS 이름 지정 사양입니다. [추천 학습: css 동영상 튜토리얼]

BEM은 "블록, 요소, 수정자"를 의미합니다.

선택기에서 다음 세 가지 기호는 확장된 관계를 나타냅니다.

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

BEM 예제 비교 사용

Block

아래 예에서와 같이 li.item은 목록의 하위 요소입니다.

/* 常规写法和BEM写法相同 */
.list

Element

/* 常规写法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM写法 */   
   <ul class="list">
    <li class="list__item">Pricing</li>
    <li class="list__item">Contact</li>
  </ul>

/* 常规写法 */ 
.list{} 
.list .item{} 

/* BEM写法 */ 
.list{} 
.list__item{}

Modifier(수정자)

"modifier"는 블록의 특정 상태로 이해될 수 있습니다! BEM의 장점이 더 커집니다

짧은 이름을 사용하면 작성 시간이 단축되므로 CSS 파일 크기도 줄어듭니다! 예를 들어 다음 예는 다음과 같습니다.

/* 常规写法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM写法 */   
  <ul class="list">
    <li class="list__item_active">
      Pricing
    </li>
    <li class="list__item">Contact</li>
  </ul>

결합된 이름 지정이 단일 이름 지정보다 낫습니다

• /* 常规写法 */ 
  .list{} 
  .list .item{} 
  .list .item.active{} 
  
  /* BEM写法 */ 
  .list{} 
  .list__item{}
  .list__item_active{}

• 속성 중심 이름 지정 및 의미 중심 이름 지정

속성 중심 이름 지정은 선택기의 이름 지정이 다음과 같다는 것을 의미합니다. CSS 스타일은 프로젝트, 페이지 또는 모듈과 관련이 없습니다. 예를 들어, 보다 고전적인 명확한 부동 클래스 이름인 .clearfix:

//  推荐
.some-intro{...}

// 不推荐
.some-introduction{...}

의미 중심 명명은 애플리케이션 요소가 위치한 컨텍스트에 따라 명명됩니다. 예:

// 不建议
.header{...}

//推荐
.cs-header{...}

위의 두 가지 명명 방법에는 각각 장점과 단점이 있습니다. 1. 속성 지향

장점: CSS는 높은 재사용률, 최고의 성능, 플러그 앤 플레이, 편리함 및 HTML과 CSS 파일 간 전환에 많은 시간이 절약되므로 개발 속도도 매우 빠릅니다. 단점

: 단일 속성으로 인해 적용 가능한 시나리오가 제한적입니다. 또한 사용하기 쉽기 때문에 남용되기 쉽고 유지 관리 비용이 높아집니다.

2. 의미 중심

장점

은 다양한 응용 시나리오를 갖추고 매우 정교한 레이아웃 효과를 얻을 수 있으며 확장이 쉽다는 것입니다.

단점

: 코드가 길고 모든 HTML에는 10픽셀 간격으로 이름을 지정해야 하므로 개발 효율성은 평균입니다. 이로 인해 많은 개발자가 태그 선택기를 직접 사용하거나 간단한 클래스 이름을 선택한 다음 부모-자식 관계를 통해 스타일을 정의하게 되어 유지 관리 문제가 더 심각해집니다.

• 명명된 요약 권장 사항
• Status

.clearfix:after { content : ''; display: table; clear: both; }

Layout

• .header { background-color: #333; color: #fff; }
  .logo {font-size: 0; color : transparent;}

• 범용 부품

前一个    prev
后一个    next
当前的    current

显示的    show
隐藏的    hide
打开的    open
关闭的    close

选中的    selected
有效的    active
默认的    default
反转的    toggle

禁用的    disabled
危险的    danger
主要的    primary
成功的    success
提醒的    info
警告的    warning
出错的    error

大型的    lg
小型的    sm
超小的    xs

Components

文档    doc
头部    header(hd)
主体    body    
尾部    footer(ft)    
主栏    main
侧栏    side    
容器    box/container

시맨틱 위젯

列表    list
列表项  item
表格    table    
表单    form
链接    link
标题    caption/heading/title
菜单    menu
集合    group
条      bar
内容    content    
结果    result

기능적 구성요소

按钮        button(btn)
字体        icon
下拉菜单    dropdown
工具栏      toolbar
分页        page
缩略图      thumbnail
警告框      alert
进度条      progress
导航条      navbar
导航        nav    
子导航      subnav
面包屑      breadcrumb(crumb)    
标签        label
徽章        badge
巨幕        jumbotron
面板        panel
洼地        well
标签页      tab
提示框      tooltip
弹出框      popover
轮播图      carousel
手风琴      collapse 
定位浮标    affix

추천 이름 지정 웹사이트

codelf: https://unbug.github.io/codelf

참조 문서:

1. 의 "CSS" 세상을 선택하세요》2, https://www.cnblogs.com/qianxiaox/p/13816077.html

(학습 영상 공유: 웹 프론트엔드)

위 내용은 우아하고 내구성이 뛰어난 CSS 코드를 작성하는 방법은 무엇입니까? CSS 이름 지정 팁을 공유합니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!