CSS를 한동안 사용해 본 적이 있다면 상속, 특이성, 이름 지정이 가장 다루기 어려운 일이라는 것을 알고 계실 것입니다. 모든 CSS는 전역적이므로 코드베이스가 커짐에 따라 스타일이 서로 충돌하고 의도하지 않은 부작용을 일으키는 것을 방지하는 것이 점점 더 어려워집니다! 다음 기사에서는 코드를 우아하고 매력적으로 만드는 몇 가지 CSS 이름 지정 팁을 공유하겠습니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.
BEM이란 무엇입니까
BEM은 CSS 이름 지정 사양입니다. [추천 학습: css 동영상 튜토리얼]
BEM은 "블록, 요소, 수정자"를 의미합니다.
선택기에서 다음 세 가지 기호는 확장된 관계를 나타냅니다.
- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线:双下划线用来连接块和块的子元素 _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态
BEM 예제 비교 사용
아래 예에서와 같이 li.item은 목록의 하위 요소입니다.
/* 常规写法和BEM写法相同 */ .list
/* 常规写法 */ <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"는 블록의 특정 상태로 이해될 수 있습니다! 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{}
// 推荐 .some-intro{...} // 不推荐 .some-introduction{...}
의미 중심 명명은 애플리케이션 요소가 위치한 컨텍스트에 따라 명명됩니다. 예: // 不建议
.header{...}
//推荐
.cs-header{...}
위의 두 가지 명명 방법에는 각각 장점과 단점이 있습니다. 1. 속성 지향
장점: CSS는 높은 재사용률, 최고의 성능, 플러그 앤 플레이, 편리함 및 HTML과 CSS 파일 간 전환에 많은 시간이 절약되므로 개발 속도도 매우 빠릅니다. 단점
: 단일 속성으로 인해 적용 가능한 시나리오가 제한적입니다. 또한 사용하기 쉽기 때문에 남용되기 쉽고 유지 관리 비용이 높아집니다.2. 의미 중심
장점
은 다양한 응용 시나리오를 갖추고 매우 정교한 레이아웃 효과를 얻을 수 있으며 확장이 쉽다는 것입니다.단점
: 코드가 길고 모든 HTML에는 10픽셀 간격으로 이름을 지정해야 하므로 개발 효율성은 평균입니다. 이로 인해 많은 개발자가 태그 선택기를 직접 사용하거나 간단한 클래스 이름을 선택한 다음 부모-자식 관계를 통해 스타일을 정의하게 되어 유지 관리 문제가 더 심각해집니다..clearfix:after { content : ''; display: table; clear: both; }
.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
文档 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!