ProgramingTip

ID, 클래스 및 요소 유형 접두사를 포함하는 HTML 명명 규칙?

bestdevel 2020. 12. 1. 19:11
반응형

ID, 클래스 및 요소 유형 접두사를 포함하는 HTML 명명 규칙?

누구든지 HTML ID 클래스에 대한 좋은 명명 규칙을 설명하고 요소 유형 (예 : btn 또는 버튼 또는 유사)을 ID로 접두사로보고 지 여부를 설명하는 좋은 리소스를 알고 있습니까?

클래스는 복수 또는 단수 택배? ID가 고유하기 때문에 단일해야한다는 것을 알지만 클래스는 어떻습니까?

ID와 클래스는 명사를합니다. 그렇죠?

기존 페이지에 다른 페이지를 삽입하는 페이지를 사용하고 있습니다. 부분 페이지와 같은 종류입니다. 따라서 ... 누구라도 ID 및 / 또는 클래스 이름을 접두사로 붙 였는지 궁금합니다. 안쪽?

모든 의견이나 의견은 정말 감사합니다.

필요한 경우 선택기에서 유추 할 수 있으므로 접두사를 사용하지 않습니다.

form#contact {
    property: value;

}

설명하신 방법은 헝가리 표기법으로 대체 그다지 인기가 없습니다.

당신이있는 하나의 고유 한 클래스 / ID가있는 하나의 div 안에 HTML을 배치 할 수 있습니다. 이것은 현지화 된 존재를 가지고 있습니다. 규칙이 호스트 페이지의 CSS에있는 다른 규칙이 아닌 영향을 받는지 확인하려는 CSS 선택기 특정 성을 찾아냅니다. 상위 페이지 내에서 요소 스타일 지정에 관한 질문에 대한이 답변을 참조하십시오.

2015 : 기존 CSS 및 HTML 명명 시스템에 점점 늘어나는 새로운 답변

어떤 규칙을 선택하든 프로젝트의 요구 사항에 맞는 요구 사항을 선택하는 것이 좋습니다.

즉, 프로젝트가 작거나 거대 확장? 프로젝트를 공동 할 예정입니까, 아니면 사용 테마를 처리해야합니까? CSS / HTML 작업을 수행하는 개발자들이 관례를 고수 할만 큼 예민하거나 경험이 있습니까? & 곧 ..

첫째,이 일반적인 (좋은?) 관행을 알지 못하는 경우 : ID를 스타일링 후크로 사용 하지 말고 클래스 만 사용합니다.

때문에 :

  • 매우 약간의 블록 (예 : 페이지 머리글, 페이지 바닥 글)만이 다른 곳에서 보완되지 않는다는 사실을 100 % 보장 할 수 있습니다.

  • (추가 ID 선택기 또는! 중요를 사용하지 않는 경우).

일반적인 요구 사항 / 사양 :

  • 이름은 하나이고 의미가 가득해야합니다.
  • 잘 작동하는 경우 약어가 아닌 경우 이름을 축약하지 않고 (예 : 메시지의 경우 msg, 계정의 경우 계정).
  • .site-nav, .aside-nav, .global-head, .btn-primary, .btn-secondary
  • 구조적 계층 (예 : BEM 규칙) 허용
  • 사용 -또는 _이름 지정 : 아마도 주관적 (개발자의 의견) 및 사용되는 키보드 언어에 따라 따라합니다. 여기에 대한 증거를 찾지 못했지만 camelCase는 브라우저 문제로 인해 제쳐 두었습니다.
  • 예외적 인 경우가 아니면 선택자에 요소를 사용하지 않습니다. 이것은 더 많은 유연성을 허용합니다. 사용하여 만든 버튼이 <input type="button"></input>사용하여 전환하고 싶습니다 <button></button>. 일부 선택기에서 요소 유형을 사용하는 경우 성가신 / 시간이 많이 사용되는 리팩토링 / 테스트 덕트 버그 수정을 계획 할 수 있습니다. SMACCS는 또한 관습에 있습니다.
  • 상태의 경우 다른 언어 (php, java, c #)의 규칙을 일치 시키십시오. 즉, "is-active", "is-badass"등을 사용하십시오.
  • 왼쪽에서 오른쪽으로 이름 : 가장 일반적인 것부터 가장 정확한 것, 즉. btn-bluetheme-create-accnt또는accordion-modrnlook-userlist
  • 클래스 또는 ID 이름은 항상 전체에서 검색하고 관련 결과 만 반환 할 수있을 것입니다.
  • 사용하는 경우 직계 하위 항목을 선호합니다. .module-name > .sub-module-namevs를 사용 .module-name .sub-module-name하면 나중에 약간의 골칫거리를 사용할 수 있습니다 ( "CSS 성능이 웃길 수 있습니다"라는 용어는 CSS가 더 단순하지만 성능이 더남).

기기 규칙 :

구조적 명명 규칙 : 위치 나 모양이 아닌 것이 무엇인지 설명하여 요소의 클래스 이름을 지정 합니다. 아래 예를 참조하십시오.

.page-container
     .page-wrap-header-n-content
     .page-header
          .branding-logo
          .branding-tagline
          .wrapper-search
          .page-nav-main
     .page-main-content
     .page-secondary-content
          .nav-supplementary
     .page-footer
          .site-info

발표 테이션 명명 규칙 : 위치 및 / 또는 모양을 설명하여 요소의 클래스 이름을 지정

합니다. 아래 예를 참조하십시오.

.theme-ocean-blue
.theme-apricot-orange
.skin-red-tango
.skin-darkness

의미 론적 명명 규칙 : 포함 하는 내용을 설명하는 이름. 에서와 가변적입니다. 아래 예를 참조하십시오.

.product-review
.notification
.language-switch
.currency-switch
.list-of-friends
.latest-status

BEM 명명 규칙 : "Block, Element, Modifier"를 나타냅니다. 구문은<module-name>__<sub-module-name>--<modifier-or-state>. 블록은 "주"컨테이너로, 당신이 부르는 모듈 / 구성 요소의 일종입니다. 요소는 주 구성 요소 (블록)의 하위 구성 요소입니다. 수정자는 금지 상태입니다. 특징 : 구문 (dbl 밑줄 및 dbl 대시 사용) 및 하위 요소에는 가장 가까운 구성 요소가 포함되어야합니다. 아래 예를 참조하십시오.

.nav-primary
.nav-primary__list
.nav-primary__item
.nav-primary__link
.nav-primary__link--is-active

.grid
.grid__item
.grid__description
.grid__img-wrap
.grid__img

.global-footer
.global-footer__col
.global-footer__header
.global-footer__link

OCSS 명명 규칙 : Object Oriented CSS를 나타냅니다. 브랜딩 목적이나 디자인의 일관성 (예 : bg 색상, 테두리 색상 등)을 위해 스킨을 사용합니다. 구조적 스타일을 추상화합니다. 아래 추상 구조 스타일의 예. OOCSS의 두 가지 주요 원칙 : 별도의 구조 및 스킨, 두 번째로 별도의 컨테이너 및 콘텐츠.

 .global-width {
      min-width: 780px;    /* minimum width */
      max-width: 1400px;   /* maximum width */
      margin: 0 auto;      /* Centering using margin: auto */
      position: relative;  /* Relative positioning to create a positioning context for child elements */
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;    /* Overflow set to "hidden" for clearfixing */
 }

일부 CSS 지침 :

CSS 스타일 가이드를 공유하는 "트렌드"가 있습니다. 여기에 몇 가지 읽어서 필요에 맞는 것으로 보이는 것을 선택하고 선택할 수 있습니다.

내 편견 :

나는 현재 BEM , 의미 론적 및 구조적 명명 규칙을 혼합하여 사용하고 있으며 꽤 잘 작동하고 있습니다.

BEM 과 시맨틱은 함께 잘 작동합니다 (예, 클래스 이름은 .list-of-friends__single-friend). BEM은 일을 특히 더 간단하게 만듭니다. CSS에 중첩 된 광기가없고 매우 장황한 코드입니다.

구조적 명명 규칙은 웹 사이트의 기본 구조 또는 웹 사이트에 여러 구조가있는 경우 각 "템플릿"에 대해서도 환영합니다. 제 생각에는 이것은 매우 일반적인 요소에만 사용해야하므로 신중하게 사용하십시오.

프리젠 테이션 명명 규칙 : 정말 ?? 고맙지 만 괜찮아요. 특별한 경우에 고려할 수 있습니다 (예 : 다른 테마의 전체 페이지 스킨).

OCSS 명명 규칙 : 인정해야합니다. 아직 더 자세히 살펴 봐야합니다. 추가 조사를 위해 아래 리소스에 링크를 제공했습니다.

자원:

많은 사람들이 당신이 이런 일을 할 수 있다는 것을 깨닫지 못합니다.

.awesome {
 /* rules for anything awesome */
}

div.awesome {
 /* rules for only awesome divs */
}

button.awesome {
 /* rules for any awesome buttons, but not awesome divs */
}

div.awesome h1 {
 /* rules for H1s inside of any div.awesome */
}

div.awesome>button {
 /* rules for immediate children buttons (not grandchildren+) of div.awesomes */
}

참고 URL : https://stackoverflow.com/questions/939909/html-naming-conventions-for-id-class-and-to-include-element-type-prefix

반응형

'ProgramingTip' 카테고리의 다른 글

Java에서 기본 애플리케이션 아이콘을 어떻게 변경합니까?  (0) 2020.12.01
JSTL jar는 어디에서 다운로드 할 수 있습니까?  (0) 2020.12.01
내부 클래스의 공용 및 내부 멤버?  (0) 2020.12.01
기본 키와 ID의 차이점은 무엇입니까?  (0) 2020.12.01
iPad 레이아웃은 세로에서 가로로 회전 할 때 확대됩니다.  (0) 2020.12.01

'ProgramingTip'의 다른글

  • 현재글ID, 클래스 및 요소 유형 접두사를 포함하는 HTML 명명 규칙?

관련글

댓글

티스토리툴바