기존에 없는 CSS 클래스를 사용할 수 있습니까?

기존에 없는 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>

통해 한 로 이 을 수행할 수 .$('.target').css('display','none');

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

<style>.target{}</style>

부작용이 있나요 아니면 더 좋은 방법이 있나요?

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

이것은 클래스를 CSS에서도 사용하기 전에 HTML로 선언해야 한다는 것을 의미하지 않습니다.루아크의 댓글을 보세요.셀렉터가 유효한지 여부는 셀렉터 구문에 전적으로 의존하며 CSS는 구문 분석 오류를 처리하기 위한 자체 규칙 집합을 가지고 있으며, 이 중 어느 것도 마크업과 관련이 없습니다.기본적으로, 이것은 HTML과 CSS가 유효성 ¹측면에서 서로 완전히 독립적이라는 것을 의미합니다.

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

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

---

¹ _{이것은 또한 CSS ID 선택기가 ID가 정확히 한 번 나타나는지 아니면 여러 번 나타나는지에 관계없이 모든 요소를 지정된 ID와 일치시키는 이유이기도 합니다(비적합 HTML 문서가 생성됨).}

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

스타일이 없는 수업을 사용해도 나쁜 영향은 없습니다.실제로, CSS의 유용성 중 일부는 마크업에서 분리되어 필요에 따라 요소/클래스/등을 스타일링하거나 스타일링하지 않을 수 있다는 것입니다.

그들을 "CSS 수업"이라고 생각하지 마세요.그것들을 CSS가 필요하다면 사용할 수 있는 "클래스"라고 생각하세요.

HTML5 사양에 따름:

클래스 특성에는 요소가 속한 다양한 클래스를 나타내는 공백으로 구분된 토큰 집합인 값이 있어야 합니다. ...작성자가 클래스 속성에 사용할 수 있는 토큰에 대한 추가적인 제한은 없지만 작성자는 원하는 내용의 표시를 설명하는 값이 아닌 내용의 특성을 설명하는 값을 사용하는 것이 좋습니다.

또한 버전 4에서는 다음과 같습니다.

클래스 속성에는 HTML의 여러 역할이 있습니다.

• 스타일 시트 선택기로(작성자가 요소 집합에 스타일 정보를 할당하려는 경우).
• 사용자 에이전트에 의한 일반적인 처리용입니다.

사용 사례는 두 번째 시나리오에 해당하며, 이는 클래스 속성을 사용하는 합법적인 예가 됩니다.

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

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

JavaScript에서 클래스 이름을 사용하면 해당 클래스를 찾기 위해 CSS를 보지 않습니다.그것은 HTML 코드에서 직접 보입니다.

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

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

(참고로, 위의 단락은 분명히 더 큰 프로젝트에 더 적합합니다. 따라서 독자적으로 작업하고 있다면 이렇게 극단으로 가야 한다고 느끼지 마십시오. 저는 두 가지가 완전히 분리될 수 있다는 점을 강조하기 위해 언급했습니다.)

CSS 클래스를 사용하지 않고도 사용할 수 있지만 자바스크립트/jQuery 코드에 대해서만 CSS 클래스를 추가하는 경우 접두사를 사용하는 것이 좋습니다.js-YourClassName프론트 엔드 개발자들은 이러한 클래스를 사용하여 요소를 스타일화하지 않습니다.그들은 이러한 클래스가 언제든지 제거될 수 있다는 것을 이해해야 합니다.

HTML에 클래스를 추가하는 순간 클래스가 정의되므로 솔루션은 완전히 정상입니다.

스타일시트에서 CSS 클래스를 정의할 필요는 없습니다.잘 될 겁니다.하지만, 그것을 추가하는 것은 해롭지 않습니다.

하지 않은 한 는 JavaScript 스타일시트를 할 수 것입니다.의 "cascading style sheet" (jQuery의 "jQuery" (jQuery의 "jQuery")입니다.css()요소의 입니다.style는 이이 없습니다.CSS와 JavaScript는 이 측면에서 전혀 관련이 없습니다.

$('.target').css('display','none');변경되지 않습니다..target { }CSS 선언입니다.대신 여기서 일어난 일은 다음과 같은 요소가class"target의 "target"은다음과 .

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

CSS 스타일 규칙을 사전 정의하지 않아서 발생하는 부작용이 있습니까?전혀 없습니다.

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

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

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

이 기존의 JSPerf를 기반으로 다음과 비교합니다.css()와 함께addClass()는 것을 알 수 있습니다.addClass()속도가 훨씬 빠릅니다.

어떻게 우리가 직접 구현할 수 있을까요?

먼저 새로운 CSS 선언에 다음과 같이 추가할 수 있습니다.

.hidden {
    display: none;
}

HTML은 그대로 유지되며, 이 미리 정의된 클래스는 나중에 사용하기 위해 사용됩니다.

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

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

코드를 하는 style일치하는 각 "대상" 요소의 속성, 이 새 클래스가 이제 추가됩니다.

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

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

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

저는 중요한 점이 사례에서 제기되지 않았다고 생각했기 때문에 끼어들고 싶었습니다.변수 길이의 요소를 시각적으로 조작해야 하는 경우(이 경우 테이블 행을 사용하는 경우) Javascript를 통해 시각적으로 조작하는 데 드는 비용이 매우 비쌀 수 있습니다(예: 수천 개의 행이 있는 경우).

이러한 상황에서 2열은 항상 숨겨져 있을 가능성이 있다는 것을 알고 있다고 가정합니다(테이블의 의식적인 기능). 그러면 이 사용 사례를 처리하기 위해 CSS 스타일을 설계하는 것이 타당합니다.

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

그런 다음 JS를 사용하여 N개의 요소를 찾는 대신 하나의 클래스(테이블)를 전환하면 됩니다.

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

테이블에 ID를 할당하면 훨씬 더 빨라질 것이고, 심지어는 다음을 사용하여 열을 참조할 수도 있습니다.:nth-child당신의 마크업을 더 줄일 수 있는 선택기이지만 효율성에 대해서는 언급할 수 없습니다.이렇게 하는 또 다른 이유는 인라인 스타일링을 싫어하기 때문이고, 그것을 근절하기 위해 최선을 다할 것입니다!

HTML 요소에 클래스를 적용해도 효과가 없으며 해당 클래스는 CSS에 정의되어 있지 않습니다.이것은 일반적인 관행이며 Aamir afridi가 말했듯이 만약 당신이 js만을 목적으로 수업을 사용한다면, 그들에게 js-로 접두사를 붙이는 것이 좋은 관행입니다.

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

클래스를 사용하여 요소를 쿼리하는 데 전혀 문제가 없습니다.나는 그런 클래스 이름을 붙이곤 했습니다.sys-를 들어, 나는 를 "접사예두다지" (" "클이을정니합름스래예다(지니정▁your▁prefix")로 명명할 입니다.sys-target스타일 지정에 사용되는 클래스와 구분합니다.이것은 과거에 몇몇 마이크로소프트 개발자들에 의해 사용된 관습이었습니다.나는 또한 사용하는 습관이 증가하는 것을 알아차렸습니다.js-이 목적을 위한 접두사.

스타일링 이외의 목적으로 수업을 사용하는 것이 불편한 경우에는 Role.js jQuery 플러그인을 사용하여 동일한 목적을 달성할 수 있도록 하는 것이 좋습니다.role속성, 그래서, 당신은 당신의 마크업을 다음과 같이 쓸 수 있습니다.<td role="target">다음을 사용하여 쿼리합니다.$("@target")프로젝트 페이지에는 좋은 설명과 예제가 있습니다.저는 스타일링만을 목적으로 수업을 진행하는 것을 정말 좋아하기 때문에 큰 프로젝트에 이 플러그인을 사용합니다.

jQuery 유효성 검사 엔진을 참조하십시오.이 경우에도 존재하지 않는 클래스를 사용하여 HTML 속성에 대한 유효성 검사 규칙을 추가합니다.따라서 스타일시트에 실제로 선언되지 않은 클래스를 사용하는 것은 잘못된 것이 아닙니다.

언급URL : https://stackoverflow.com/questions/18701670/can-i-use-non-existing-css-classes