맞춤 속성-예 또는 아니요?

254

최근에 나는 주로 자바 스크립트 코드에 사용하기 위해 약간의 추가 데이터 비트를 포함하기 위해 HTML 태그에 사용자 정의 속성을 사용하는 사람들에 대해 점점 더 많이 읽었습니다.

사용자 지정 특성을 사용하는 것이 좋은지 여부와 일부 대안이 무엇인지에 대한 피드백을 수집하기를 희망했습니다.

서버 측과 클라이언트 측 코드를 모두 단순화 할 수있는 것처럼 보이지만 W3C와 호환되지 않습니다.

웹앱에서 사용자 정의 HTML 속성을 사용해야합니까? 그 이유는 무엇?

커스텀 속성이 좋은 것이라고 생각하는 사람들을 위해 : 그것들을 사용할 때 명심해야 할 것은 무엇입니까?

커스텀 속성이 좋지 않다고 생각하는 사람들에게 : 비슷한 것을 달성하기 위해 어떤 대안을 사용하십니까?

업데이트 : 내가 주로에 관심이 추론 하나 개의 방법이 다른 것보다 더 나은 이유에 대한 다양한 방법의 뒤에뿐만 아니라 포인트. 나는 우리 모두가 같은 것을 성취하기 위해 4-5 가지 다른 방법을 생각해 낼 수 있다고 생각합니다. (숨겨진 요소, 인라인 스크립트, 추가 클래스, ID의 구문 분석 정보 등).

업데이트 2 : HTML 5 data-속성 기능은 여기에서 많은 지원을하는 것으로 보입니다 (그리고 나는 확실한 옵션처럼 보입니다). 지금까지 나는이 제안에 대한 반박의 방식을 많이 보지 못했다. 이 방법을 사용할 때 걱정할만한 문제가 있습니까? 아니면 단순히 현재 W3C 사양의 '무해한'무효화입니까?

— TM.
소스

솔직히, 내 초기 입장은 것이다 없는 순수 주의자와 다소 논란이 될 수있는 나쁜 일. 그래도이 문제를 제대로 뒷받침 할 수있는 모든 옵션을 평가하고 평가해야하므로 긴 에세이를 작성해야합니다.

— Paolo Bergantino

당신이 일부 반대 예제를해야 할 수도 [S] 수행하려면 : 당신이 그것을 할 편리 어떻게 구현 하려는지의 사용자 지정 특성, 그리고 왜 그 솔루션 나은과 및 사용자 정의 속성없이 다른 솔루션보다 더.

— ChrisW 2016 년

@ChrisW 특정 응용 프로그램이 아닌 관심을 끌고 있습니다.

— TM.

글쎄, 클라이언트 측에 데이터를 가져 오는 많은 옵션이 있습니다 : 숨겨진 입력 필드, 숨겨진 정의 목록, 클래스, 메타 데이터 플러그인, 모든 데이터 매핑이 별도로 거대한 Javascript 사전 (객체), 사용자 정의 속성, 데이터 속성 ( HTML5) 등을 모두 살펴보고 장점과 함정을 고려하여 결론에 도달하려고합니다. 이 포스트는 마침내 이것을 작성 하기 시작 했습니다. :) 2010 년 전에 언젠가해야합니다.

— Paolo Bergantino

2

@Paolo 당신은 우리에게 링크를주지 않고이 질문에 대답하는 에세이를 썼다고 말할 수는 없습니다. 쿨하지 않아.

— Connell

253

HTML 5는로 시작하는 맞춤 속성을 명시 적으로 허용합니다 data. 예를 들어 <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>유효합니다. 표준에서 공식적으로 지원되기 때문에 이것이 사용자 정의 속성에 가장 적합한 옵션이라고 생각합니다. 또한 다른 속성을 해킹으로 과부하시키지 않아도 HTML이 의미를 유지할 수 있습니다.

출처 : http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

— 척
소스

이것은 좋은 접근 방법입니다. 그러나 IE 6 및 다른 오래된 브라우저를 지원해야한다는 것은 의심 스럽습니다.

— cllpse 2016 년

8

구형 브라우저에서 작동한다고 확신합니다. 속성은 DOM에 추가되어 액세스 할 수 있습니다.

— Ms2ger

12

HTMLElement에서 getAttribute () 메소드를 사용하는 모든 브라우저에서 완벽하게 작동합니다. 또한 HTML5 데이터 세트 지원이 증가함에 따라 쉽게 추가 할 수 있습니다.

— ajm

1

@Chuck은 분명히 DOCTYPE에 속성을 추가 할 수 있습니다 : rodsdot.com/html/…- 좋은 생각은 아니지만 표준화 된 것처럼 보입니다.

— Michael Stum

2

@Wahnfrieden : w3.org/TR/REC-html40/intro/sgmltut.html#idx-attribute-8 은 승인 된 표준 준수 방법입니다. 어떤 잘 설명하고 여기에 설명된다 : rodsdot.com/html/... 이전에 다른 사람에 의해 게시한다.

— rdivilbiss

95

최근에 사용한 기술이 있습니다.

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

comment-object는 부모 요소 (예 : #someelement)에 연결됩니다.

파서는 다음과 같습니다. http://pastie.org/511358

특정 요소에 대한 데이터를 얻으려면 parseData유일한 인수로 전달 된 해당 요소에 대한 참조로 호출 하십시오.

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

그보다 더 간결 할 수 있습니다.

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

액세스 :

parseData( document.getElementById('foo') ).specialID; // <= 245

이것을 사용하는 유일한 단점은 자체 폐쇄 요소 (예 :)와 함께 사용할 수 없다는 점입니다 <img/>. 주석은 해당 요소의 데이터로 간주 될 요소 내에 있어야 하기 때문입니다.

편집 :

이 기술의 주목할만한 이점 :

손쉬운 구현
합니까 하지 무효화 HTML / XHTML
사용하기 쉽고 이해하기 (기본 JSON 표기법)
대부분의 대안보다 눈에 거슬리지 않고 의미 론적으로 깨끗합니다.

파서 코드는 다음과 같습니다 ( pastie.org에서 사용할 수없는 경우 http://pastie.org/511358 하이퍼 링크 에서 복사 ).

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();

— 제임스
소스

2

호기심으로, 자기 결산 태그에 어떤 방법을 사용합니까? 일반적으로 <input> 요소에 이와 같은 것을 사용해야합니다 (클라이언트 측 유효성 검사 규칙을 돕기 위해). 그 상황에서 어떤 대안을 택하십니까?

— TM.

2

아마도 "parentNode"에 연결되는 주석 데이터 대신 유사한 기술을 사용하여 주석의 "previousSibling"에 연결할 수 있습니다. 그러면 <input /> 바로 다음에 주석을 가질 수 있습니다. 작업 : <input /> <!-{data : 123}->

— James

7

사람이 JQuery와 플러그인해야

— SeanDowney

10

주석은 아무것도 깨지 않고 변경 / 삭제할 수 있어야합니다. 그게 요점입니다. 따라서 마크 업이나 코드에 중요한 것을 주석에 넣는 것은 좋지 않습니다. 미래의 개발자는 자신이 의견이라고 생각하고 삭제할 수 있습니다. 우리는 이미이 질문에 대한 실질적인 해결책을 가지고 있습니다 : "data-"접두사가 붙은 맞춤 속성 이 접근법은 절대 사용해서는 안됩니다.

— MGOwen

6

@MGOwen의 진술을 강화하겠습니다 : 기능 추가에 주석을 사용하지 마십시오. 특히 HTML에서. 축소기를 사용하지 않습니까? 코드를 위반하지 않으면 주석을 제거 할 수 없습니다. 또한 더 이상 실제 의견을 추가 할 수 없습니다.

— Olivictor

15

페이지의 스키마를 지정하면 모든 속성을 작성할 수 있습니다.

예를 들면 다음과 같습니다.

이거 추가 해봐

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

페이스 북 (태그 포함)

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

— BrunoLM
소스

10

사용자 정의 속성을 사용하지 않는 가장 쉬운 방법은 기존 속성을 사용하는 것입니다.

의미 있고 관련성이 높은 클래스 이름을 사용하십시오.
예를 들어 책과 CD를 나타내려면 다음 type='book'과 같은 작업을 수행하십시오 type='cd'. 수업은 뭔가가 무엇을 나타내는 훨씬 더 나은 입니다 .

예 : class='book'

나는 과거에 사용자 정의 속성을 사용했지만 솔직히 의미 론적으로 의미있는 방식으로 기존 속성을 사용하는 경우 속성을 사용할 필요가 없습니다.

보다 구체적인 예를 들기 위해 다른 종류의 상점에 대한 링크를 제공하는 사이트가 있다고 가정 해 봅시다. 다음을 사용할 수 있습니다.

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

CSS 스타일링은 다음과 같은 클래스를 사용할 수 있습니다.

.store { }
.cd.store { }
.book.store { }

위의 예에서 두 사이트 모두 상점에 대한 링크 (사이트의 다른 관련없는 링크와 반대)이고 하나는 CD 저장소이고 다른 하나는 서점입니다.

— 조나단 핑 랜드
소스

4

좋은 점이지만 공정하게 말하면 "type"은 특정 태그에서만 유효하며, 유효한 속성 인 경우 유효한 값 목록도 있으므로 여전히 w3c를 준수하지는 않습니다.

— TM.

1

내 요점은 이것에 type 태그를 사용해서는 안된다는 것입니다. 그러므로 만약 당신이 ... 그렇다면 당신은 ... 더 명확하게하기 위해 편집 할 것입니다

— Jonathan Fingland

나는 "qualifier-"타입을 추가하여 플레이버로 "class"속성을 만드는 경향이있다. 레이아웃과 관련된 div의 경우 클래스가 "layout-xxx"이거나 책이나 상점과 같이 중요한 부분을 둘러싼 내부 div의 경우 컨텐츠 북 또는 컨텐츠 저장소가 있습니다. . 그런 다음 JavaScript에서 내가 찾고있는 것을 기반으로 태그에 그러한 것들을 추가하는 기능이 있습니다. 그것은 나를 위해 깨끗하고 정리 된 상태를 유지하는 데 도움이되지만 어느 정도의 훈련과 사전 조직이 필요합니다.

— Ape-inago 2016 년

2

@Jonathan 더블 클래스는 '값'을 알 수없는 경우를 제외하고는 훌륭하게 작동합니다. 예를 들어, 어떤 종류의 정수 id라면 가능한 모든 경우에 대해 잘 선택할 수는 없습니다. 그런 다음 클래스 속성을 수동으로 구문 분석해야합니다.이 속성은 확실히 작동 할 수 있지만 코드에서는 명확하지 않으며 경우에 따라 구문 분석 할 후보 요소가 많은 경우 매우 느릴 수 있습니다.

— TM.

2

슬프게도 두 클래스에 대한 CSS 선택기를 동시에 작성하면 (.ab 누락 된 공백에 주목) IE에서 작동하지 않습니다. 그것은 파이어 폭스와 다른 브라우저에서 작동합니다. 그래도 클래스를 사용하면 마크 업에 의미 적 의미를 추가 할 수 있습니다.

— knittl

6

dom에 데이터를 포함시키고 jQuery에 메타 데이터 를 사용하십시오 .

모든 우수한 플러그인은 메타 데이터 플러그인 (태그 당 옵션 허용)을 지원합니다.

또한 키-값 쌍뿐만 아니라 매우 복잡한 데이터 / 데이터 구조도 허용합니다.

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

또는

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

또는

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

그런 다음 데이터를 다음과 같이 얻으십시오.

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');

— antony.trupe
소스

22

사용자 지정 특성을 지정하는 W3C 승인 방법이있을 때 클래스 특성이 손상되면 투표권이 떨어졌을 수 있습니다.

— rdivilbiss

2

클래스 속성을 손상시키는 것은 플러그인을 사용하는 방법 중 하나 일뿐 입니다. 유일한 방법 은 아닙니다 .

— antony.trupe

1

투표를 거부 한 또 다른 이유는 플러그인이 전혀 필요하지 않은 플러그인을 제안하기 때문입니다.

— meandre

4

네임 스페이스를 확장하거나 확장하지 않고 기존 XHTML 기능을 사용하는 데 아무런 문제가 없습니다. 작은 예를 살펴 보겠습니다.

<div id="some_content">
 <p>Hi!</p>
</div>

추가 속성없이 some_content에 추가 정보를 추가하는 방법은 무엇입니까? 다음과 같은 다른 태그를 추가하는 것은 어떻습니까?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

그것은 당신이 선택한 잘 정의 된 id / extension "_extended"와 계층에서의 위치에 의해 관계를 유지합니다. 필자는 종종이 접근법을 jQuery와 함께 사용하고 실제로 Ajax와 유사한 기술을 사용하지 않습니다.

— 머쿠로
소스

2

이와 같이 중첩 된 태그를 추가 할 때의 문제점은 매우 성 가시고 추악한 서버 사이드 코드 (JSP / ASP / DTL 등)

— TM

3

아니. 대신 다음과 같이 해보십시오.

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>

— 곧
소스

1

동적 페이지를 위해 문서 전체에 많은 추가 스크립트 태그를 작성하고 싶습니까? 정보가 클라이언트 측에 추가 될 때 수동 자바 스크립트 할당을 사용하지만이 문제는 주로 서버에서 렌더링 할 내용에 관한 것입니다. 또한 jQuery.data ()가 메소드보다 훨씬 좋습니다.

— TM.

위의 답변은 기능을 보여주기 위해 프레임 워크에 독립적이며 정교한 예입니다. 코드의 요점을 쉽게 확장하여 코드를 매우 간결하게 만들 수 있습니다. 예를 들어, <div id = "foo"/> <div id = "bar"/> <div id = "baz"/> <script type = "text / javascript"> xtrnlFnc ({foo : 'w00 h00', 바 : 'etc.', baz : 3.14159}); </ script> jQuery (원래 질문에 언급하지 않은)를 사용하는 경우 반드시 data 메소드를 사용하십시오. 그렇지 않은 경우 아키텍처 계층간에 데이터를 전달하는 것은 인라인 스크립트 태그를 완벽하게 사용하는 것입니다.

— Anon

분명하고 유효한 옵션입니다. 내 생각에 그것은 사용자 정의 속성을 사용하지 않는 많은 다른 대안보다 코드를 복잡하게 만듭니다. 그리고 명확하게 말해서, 나는 싸우거나 무례하지 않으려 고 노력합니다. 나는 당신이 왜이 방법을 선호하는지에 대한 당신의 추론 중 일부를 동원하려고합니다. 당신은 대안을 제공했지만 그것은 실제로 질문에 관한 것이 아닙니다.

— TM.

1

브라우저를 깨는이 접근법에 문제가 있다고 생각하지 않습니다. Microsoft는이 정확한 메커니즘을 ASP.NET 페이지에서 선호하는 메커니즘으로 사용합니다. (서버 측에서 RegisterExpandoAttribute를 호출하여). 문제는 서버가 아닌 클라이언트에 초점을 맞춘 것처럼 보이지만 서버 측에서는 이러한 모든 접근 방식이 추상화 될 수 있습니다.

— Adrian

3

이 접근 방식의 장점 :-이전 브라우저 / 사양에서도 유효한 마크 업을 생성합니다. --JS가 소비 할 데이터의 의도를 명확하게합니다. -주석과 같은 다른 기능을 영리하게 사용하지 않고도 요소에 응집력이 있습니다. -특별한 구문 분석이 필요하지 않습니다. 서버 측 관점에서 보면 RPC와 같다고 생각할 수 있습니다.

— steamer25 2016 년

2

XHTML을 출력하기 때문에 사용자 지정 특성을 사용하고 있지 않습니다. 제 3 자 소프트웨어가 데이터를 기계로 읽을 수 있기를 원하기 때문입니다 (하지만 원하는 경우 XHTML 스키마를 확장 할 수는 있음).

사용자 정의 속성의 대안으로, 대부분 id 및 class 속성 (예 : 다른 답변에서 언급 한 바와 같이)이 충분한 것으로 나타났습니다.

또한 이것을 고려하십시오 :

추가 데이터를 사람이 읽을 수 있고 기계가 읽을 수있는 경우 사용자 정의 속성 대신 (표시되는) HTML 태그와 텍스트를 사용하여 인코딩해야합니다.
사람이 읽을 필요가 없다면 보이지 않는 HTML 태그와 텍스트를 사용하여 인코딩 할 수 있습니다 .

일부 사람들은 예외를 만듭니다. 사용자 정의 속성을 허용하여 런타임시 클라이언트 측에서 Javascript로 DOM에 추가합니다. 사용자 정의 속성은 런타임시 DOM에만 추가되므로 HTML에는 사용자 정의 속성이 없습니다.

— ChrisW
소스

1

우리는 HTML의 서브셋을 이해하는 웹 기반 편집기를 만들었습니다. 이것은 매우 엄격한 서브셋입니다 (메일 클라이언트가 거의 보편적으로 이해합니다). 우리 <td width="@INSWIDTH_42@">는 데이터베이스 와 같은 것을 표현해야 하지만 DOM에서는 그것을 가질 수 없습니다. 그렇지 않으면 편집기가 실행되는 브라우저가 기절합니다 (또는 사용자 정의 속성을 기절시킬 가능성보다 기절합니다) . 우리는 드래그 앤 드롭을 원했기 때문에 jquery와 마찬가지로 DOM에 순수하게 넣었습니다 .data()(추가 데이터가 제대로 복사되지 않았습니다). 에 타기 위해 추가 데이터가 필요할 수도 있습니다 .html(). 결국 우리 <td width="1234" rs-width="@INSWIDTH_42@">는 편집 과정 에서 사용 하기로 결정한 다음 모두 POST 할 때 width정규식 검색 및 파괴를 제거 하고 수행합니다 s/rs-width=/width=/g.

처음 에이 대부분을 쓰는 사람은이 문제에 대한 유효성 검사-나치였으며 우리의 사용자 정의 속성을 피하기 위해 모든 것을 시도했지만 결국 우리의 모든 요구 사항에 맞는 다른 것이 보이지 않을 때 인수되었습니다. 사용자 지정 속성이 전자 메일에 표시되지 않는다는 것을 알았을 때 도움이되었습니다. 추가 데이터를에 인코딩하는 것을 고려 class했지만 두 가지 악이 더 큰 것으로 결정했습니다.

개인적으로 저는 일을 깨끗하게하고 통과시키는 것 등을 선호 하지만, 회사 직원으로서 저의 주된 책임은 회사의 자아를 추구하는 것이 아니라 회사의 사명 (가능한 한 빨리 많은 돈을 버는 것)을 발전시키는 것임을 기억해야합니다 기술적 순도. 도구는 우리를 위해 작동해야합니다. 그들을 위해 우리가 아닙니다.

— 번드 젠 드리 섹
소스

1

나는 사람들이 그것에 반대한다는 것을 알고 있지만 이것에 대한 짧은 해결책을 생각해 냈습니다. "mine"과 같은 사용자 정의 속성을 사용하려면 다음과 같이하십시오.

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

그런 다음이 코드를 실행하여 jquery.data ()와 마찬가지로 객체를 다시 가져올 수 있습니다.

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});

— 덩어리
소스

0

사양 : JavaScript를 사용하여 "DecimalSeparator"및 "ThousandsSeparator"속성에 따라 텍스트를 숫자로 동적으로 자동 서식 지정하는 ASP.NET TextBox 컨트롤을 만듭니다.

이러한 속성을 컨트롤에서 JavaScript로 전송하는 한 가지 방법은 컨트롤에서 사용자 지정 속성을 렌더링하도록하는 것입니다.

<input type="text" id="" decimalseparator="." thousandsseparator="," />

사용자 정의 속성은 JavaScript로 쉽게 액세스 할 수 있습니다. 맞춤 속성이있는 요소를 사용하는 페이지는 유효성 검사 를하지 않지만 해당 페이지의 렌더링에는 영향을 미치지 않습니다.

나는 단지 내가 자바 스크립트와 함께 사용하기위한 HTML 요소에 문자열과 정수와 같은 단순한 형태를 연결할 때이 방법을 사용합니다. HTML 요소를보다 쉽게 식별하려면 class 및 id 속성 을 사용하겠습니다 .

— cllpse
소스

0

복잡한 웹 앱의 경우 모든 곳에서 사용자 정의 속성을 삭제합니다.

더 많은 공개 페이지를 보려면 "rel"속성을 사용하고 모든 데이터를 JSON으로 덤프 한 다음 MooTools 또는 jQuery로 디코딩하십시오.

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

나는 최근에 "준비"하기 위해 HTML 5 데이터 속성을 고수하려고 노력하고 있지만 아직 자연스럽게 나오지 않았습니다.

— 라이언 플로렌스
소스

-1

<ai = ""...와 같이 항상 사용자 정의 필드를 사용합니다. 그런 다음 jquery로 i를 참조하십시오. 유효하지 않은 html입니다. 잘 작동합니다.

— 마리우스
소스

여기에 빠진 것 같습니다. 태그가 완성 되었습니까?

— 스튜어트 시글 러

아무도 이것을 어떻게 이해할 수 있습니까? 답을 완성하십시오.

— Rahul Raj

-2

내가 생각하기에 사용자 정의 속성은 검증되지 않으므로 사용해서는 안됩니다. 그 대신에 다음과 같은 단일 요소에 대해 많은 클래스를 정의 할 수 있습니다.

<div class='class1 class2 class3'>
    Lorem ipsum
</div>

— 앨런 학개 알라비
소스

10

개인적으로 저는 이것이 끔찍한 예라고 생각합니다. 클래스 이름은 목적이 아니라 모양을 정의합니다. 비슷한 div를 모두 변경하고 싶을 때를 생각해보십시오 ... 가서 모두 11로 확장해야합니다. 클래스는 그것이 무엇인지 정의해야합니다. 스타일 시트는 이러한 일이 어떻게 보이는지 정의해야합니다

— 조나단 Fingland에게

이 방법을 사용하여 단순한 플래그 이상을 지정 하시겠습니까? 나는 당신의 입장에 동의하는 경향이 있으며, 나는 맞춤 속성을 사용하지 않습니다 (나는 그것을 고려하고 있지만). 키 / 값 쌍을 갖는 이점은 단순히 다른 클래스를 추가하는 것보다 훨씬 더 편리합니다.

— TM.

@Jonathan Fingland : Compass를 사용하는 경우 여기에서 클래스 이름을 설정할 필요가 없습니다. .sass 파일에 지정하면 마크 업이 깨끗해집니다.

— Alan Haggai Alavi 2016 년

@Jonathan Fingland,이 class속성은 "looks"전용으로 예약되지 않았습니다. 또 다른 용도는 "사용자 에이전트에 의한 일반 목적 처리"입니다. :이 사양 말하는 중 w3.org/TR/REC-html40/struct/global.html#h-7.5.2

— npup

@npup : 흥미로운 따옴표 선택. 1 년 전에 언급했듯이 스타일 시트는 이러한 것들이 어떻게 보일지를 정의하고 (스타일 속성과 마찬가지로 추가 할 것입니다) 클래스 속성은 요소의 목적을 정의하는 데 사용됩니다. 즉, 그것이 무엇을 정의하는 데 사용되며, 어떻게 보이는지 정의하는 데 사용되지 않습니다. 나는 우리가 말할 수있는 한 동의 한대로 내가 말한 것을 잘못 읽었을 수도 있다고 생각합니다.

— Jonathan Fingland