기존 CSS가 아닌 클래스를 사용할 수 있습니까?

존재하지 않는 CSS 클래스를 통해 jQuery로 전체 열을 표시하거나 숨기는 테이블이 있습니다.

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

이 DOM을 사용하면 jQuery를 통해 한 줄로 수행 할 수 있습니다. $('.target').css('display','none');

이것은 완벽하게 작동하지만 정의되지 않은 CSS 클래스를 사용하는 것이 유효합니까? 빈 클래스를 만들어야합니까?

<style>.target{}</style>

부작용이 있거나 더 좋은 방법이 있습니까?

"CSS 클래스"는 잘못된 이름입니다. classHTML 요소에 할당하는 속성 (또는 스크립팅 측면에서 속성)입니다. 다시 말해, CSS가 아닌 HTML로 클래스를 선언하기 때문에 "target"클래스 는 실제로 해당 특정 요소에 존재하며 마크 업은 그대로 유효합니다.

그렇다고 CSS에서 클래스를 사용하기 전에 HTML에 클래스를 선언해야한다는 의미는 아닙니다. ruakh의 의견을보십시오. 선택기가 유효한지 여부는 전적으로 선택기 구문에 달려 있으며 CSS에는 구문 분석 오류를 처리하기위한 자체 규칙 세트가 있으며 마크 업에는 전혀 관련이 없습니다. 본질적으로 이것은 유효성 측면에서 HTML과 CSS가 서로 완전히 독립적이라는 것을 의미합니다. ¹

일단 이해하면 .target스타일 시트에 규칙을 정의하지 않은 부작용이 없다는 것이 분명해집니다 . ² 요소에 클래스를 할당하면 스타일 시트 나 스크립트 또는 둘 다에서 해당 클래스로 해당 요소를 참조 할 수 있습니다. 어느 쪽도 다른쪽에 의존하지 않습니다. 대신, 둘 다 마크 업 (또는 더 정확하게는 DOM 표현)을 참조합니다. 이 원칙은 jQuery one-liner에서와 같이 JavaScript를 사용하여 스타일을 적용하는 경우에도 적용됩니다.

클래스 선택기로 CSS 규칙을 작성할 때 "이 클래스에 속하는 요소에 스타일을 적용하고 싶습니다"라고 말하는 것입니다. 마찬가지로 특정 클래스 이름으로 요소를 검색하는 스크립트를 작성할 때 "이 클래스에 속하는 요소로 작업을 수행하려고합니다"라고 말합니다. 여부가 있는 문제의 클래스에 속해 별도의 문제가 전부입니다 요소.

¹ _{또한 CSS ID 선택기 가 ID가 정확히 한 번 또는 여러 번 나타나는지 (부적합한 HTML 문서로 표시)에 관계없이 주어진 ID 와 모든 요소를 일치시키는 이유 입니다.}

² _{빈 CSS 규칙이 필요한 곳을 알고있는 유일한 상황은 일부 브라우저가 버그로 인해 다른 규칙을 제대로 적용하지 않는 경우입니다. 빈 규칙을 만들면 어떤 이유로 든 다른 규칙이 적용됩니다. 이러한 버그의 예는 이 답변 을 참조하십시오 . 그러나 이것은 CSS 쪽이므로 마크 업과 관련이 없습니다.}

스타일이없는 클래스를 사용하는 데 나쁜 영향은 없습니다. 실제로 CSS의 유용성 중 하나는 CSS가 마크 업과 분리되어 있으며 요소 / 클래스 등의 스타일을 지정할 수 있다는 것입니다. 필요에 따라.

그것들을 "CSS 클래스"라고 생각하지 마십시오. 그것들을 필요할 때 CSS가 사용하는 "클래스"라고 생각하십시오.

HTML5 사양 에 따르면 :

클래스 속성에는 요소가 속하는 다양한 클래스를 나타내는 공백으로 구분 된 토큰 세트 값이 있어야합니다. ... 작성자가 클래스 속성에 사용할 수있는 토큰에 대한 추가 제한은 없지만 저자는 원하는 컨텐츠 표현을 설명하는 값보다는 컨텐츠의 특성을 설명하는 값을 사용하도록 권장됩니다.

또한 버전 4에서 :

클래스 속성은 HTML에서 몇 가지 역할을합니다.

• 스타일 시트 선택기 (작성자가 스타일 정보를 요소 세트에 지정하려는 경우).
• 사용자 에이전트에 의한 범용 처리

유스 케이스는 두 번째 시나리오에 해당하므로 클래스 속성을 사용하는 것이 합법적 인 예입니다.

스타일이없는 클래스를 사용할 수 있습니다. 이것은 완전히 유효한 HTML입니다.

CSS 파일에서 참조되는 클래스는 클래스의 정의가 아니며 스타일 지정을위한 선택기 규칙 으로 사용됩니다.

JavaScript에서 클래스 이름을 사용할 때 해당 클래스를 찾기 위해 CSS를 보지 않습니다 . HTML 코드에서 직접 찾습니다.

필요한 것은 클래스 이름이 HTML에 있다는 것입니다. CSS에있을 필요는 없습니다.

실제로 많은 사람들 이 CSS와 Javascript를 사용하여 별도의 클래스를 사용하는 것이 실제로 좋은 생각이라고 생각 합니다. 디자이너와 코더가 서로의 클래스를 사용하여 서로의 방식으로 독립적으로 작업 할 수 있기 때문입니다.

(위 단락은 분명히 더 큰 프로젝트에 더 적용 가능하므로 직접 작업하는 경우이 극단으로 가야한다고 생각하지 마십시오. 두 가지를 완전히 분리 할 수 ​​있다고 지적했습니다. )

당신이 사용할 수있는 CSS의 를 사용하지 않고 클래스를,하지만 난 당신이 그것으로 CSS의 바로 자바 스크립트 / jQuery 코드의 클래스, 접두사를 추가하는 경우 제안 js-YourClassName프런트 엔드 개발자가 요소 스타일이 클래스를 사용하지 않도록. 이 클래스는 언제든지 제거 할 수 있음을 이해해야합니다.

HTML에 클래스를 추가하는 순간 클래스가 정의되므로 솔루션이 완전히 괜찮습니다.

스타일 시트에서 CSS 클래스 를 정의 할 필요는 없습니다 . 잘 작동합니다. 그러나 추가해도 손상되지 않습니다.

여기에 아무도 언급하지 않은 한 가지는 JavaScript (이 경우 jQuery가 제공함)가 문서의 CSS 스타일 시트를 직접 수정할 수 없다는 것입니다. jQuery의 css()메소드는 일치하는 요소 집합 style속성 만 변경합니다 . CSS와 JavaScript는이 측면에서 완전히 관련이 없습니다.

$('.target').css('display','none');.target { }CSS 선언을 전혀 변경하지 않습니다 . 대신 class에 "target"을 가진 요소는 이제 다음과 같이 보입니다 :

<element class="target" style="display:none;"></element>

CSS 스타일 규칙을 미리 정의하지 않아서 부작용이 있습니까? 아무것도 아닙니다.

더 좋은 방법이 있습니까? 성능 측면에서 그렇습니다!

성능을 어떻게 향상시킬 수 있습니까?

style각 요소를 직접 수정하는 대신 새 클래스를 미리 정의하고addClass() (다른 jQuery 메소드)를 사용하여 일치하는 요소에 추가 할 수 있습니다 .

을 바탕으로 이 기존 JSPerf 비교 css()로 addClass(), 우리가 볼 수있는 addClass()훨씬 빠른 실제로 :

우리는 어떻게 이것을 스스로 구현할 수 있습니까?

먼저 새로운 CSS 선언을 추가 할 수 있습니다.

.hidden {
    display: none;
}

HTML은 동일하게 유지됩니다.이 사전 정의 된 클래스는 나중에 사용할 수 있도록 준비되어 있습니다.

이제 addClass()대신 사용하도록 JavaScript를 수정할 수 있습니다 .

$('.target').addClass('hidden');

style일치하는 "대상"요소 각각의 속성을 직접 수정하지 않고이 코드를 실행할 때이 새 클래스가 추가되었습니다.

<element class="target hidden"></element>

새로운 "숨겨진"클래스를 사용하면이 요소는 CSS에 선언 된 스타일을 상속받으며 요소가 더 이상 표시되지 않도록 설정됩니다.

다른 많은 사람들이 언급했듯이 예, CSS가 할당되지 않은 클래스를 사용하는 것은 완벽하게 유효하며 'CSS 클래스'로 생각하기보다는 클래스 및 ID의 의미를 각각 그룹 및 개별 요소로 인식해야합니다.

예를 들어 중요한 점이 제기되지 않았다고 생각하면서 칩을 넣고 싶었습니다. 가변 길이의 요소 (이 경우 테이블 행을 사용하는)를 시각적으로 조작해야하는 경우 Javascript를 통해 수행하는 비용이 잠재적으로 매우 비쌀 수 있음을 인식하는 것이 좋습니다 (예 : 수천 행).

이 상황에서 2 열은 항상 숨겨 질 가능성이 있으며 (테이블의 의식적인 기능)이 사용 사례를 처리하기 위해 CSS 스타일을 디자인하는 것이 합리적이라고 가정 해 봅시다.

table.target-hidden .target { display: none; }

그런 다음 JS를 사용하여 N 요소를 찾는 DOM을 탐색하는 대신 클래스를 하나의 테이블로 전환하면됩니다.

$("table").addClass("target-hidden")

테이블에 ID를 할당하면 훨씬 빨라지고 :nth-child선택기를 사용하여 열을 참조하면 마크 업이 더 줄어들지 만 효율성에 대해서는 언급 할 수 없습니다. 이 작업을 수행하는 또 다른 이유는 인라인 스타일링이 싫어서 근절하기 위해 많은 노력을 기울일 것입니다!

HTML 요소에 클래스를 적용하고 해당 클래스가 CSS에 정의되어 있지 않으면 효과가 없습니다. 일반적인 관행이며 Aamir afridi가 js 전용 클래스를 사용하는 경우 js- 접두어를 붙이는 것이 좋습니다.

calsses뿐만 아니라 html 요소의 id 속성에도 유효합니다.

클래스를 사용하여 요소를 쿼리하는 데 전혀 문제가 없습니다. 스타일링에 사용되는 클래스와 구분 하기 위해 이러한 클래스 이름에 sys-접두사 ( 예 : 클래스 이름 sys-target을 지정 함)를 부여했습니다. 이것은 과거에 일부 Microsoft 개발자들이 사용한 관습이었습니다. 또한 js-이 목적으로 접두사를 사용하는 관행이 커지는 것을 발견했습니다 .

스타일링 이외의 목적으로 클래스를 사용하는 데 익숙하지 않은 경우 속성을 사용하여 동일한 목적을 달성 할 수 있는 Role.js jQuery 플러그인을 사용하는 것이 좋습니다 role. 따라서 마크 업을 작성 하고을 사용하여 <td role="target">쿼리 할 수 $("@target")있습니다. 프로젝트 페이지에는 좋은 설명과 예제가 있습니다. 스타일링 목적으로 만 수업을 유지하는 것을 좋아하기 때문에 큰 프로젝트에이 플러그인을 사용합니다.

jQuery 유효성 검사 엔진을 참조하십시오 . 거기에도 존재하지 않는 클래스를 사용하여 HTML 속성 에 대한 유효성 검사 규칙을 추가 합니다. 따라서 실제로 스타일 시트에 선언되지 않은 클래스를 사용하는 데 아무런 문제가 없습니다.