JSCSS의 제안
5288 단어 CSS 설계flocssJavaScriptSMACSSCSS
입문
JSCSS(JavaScript CSS)는 FLOCSS와 SMACSS 개념일을 채택한 CSS 구성 방안이다.
TL; DR
JSCSS에서 JavaScript의 변수 이름 또는 함수 이름으로 사용되는 CSS의 이름(ID 변수만)js_*을 사용합니다.
이외에도 CSS 사용l-*을 사용하여 JavaScript의 변수 이름과 함수 이름을 CSS 이름으로 사용하지 않습니다.
왜 "l-*" 접두사가 안 돼요?
자바스크립트 프로그램은 l-* 접두사-를 감법으로 해석하기 때문에 함수 이름과 변수 이름이 성립되지 않습니다.
"l-*" 접두사 실패 예
JavaScript 프로그램<div class="l-header">
<button id="l-header__button">
ボタン
</button>
</div>
<script>
function l-header__button_click() {
console.log('click');
}
l-header__button.addEventListener(
'click',
l-header__button_click
);
</script>
JavaScript는 접두사-를 뺄셈으로 해석하고 함수l-header__button_click 및 ID 변수l-header__button는 오류로 인해 생성되지 않음
"js_*" 접두사 성공 사례
JavaScript 프로그램<body>
<div class="l_header">
<button id="js_header__button">
ボタン
</button>
</div>
<script>
function js_header__button_click() {
console.log('click');
}
js_header__button.addEventListener(
'click',
js_header__button_click
);
</script>
</body>
함수js_header__button_click 및 ID 변수js_header__button가 생성되어 일관성 있고 오류가 발생하지 않는 JavaScript 프로그램
이 됩니다.
감상
접두사를 붙이는 게 좋을 것 같아서 FLOCSS와 SMACSS를 사용해 봤는데 자바스크립트 프로그램을 쓸 때 사용하기 어려웠어요.
왜 안 해요?
소감의 후속
l_*에 스타일을 부여할 때 같은 페이지에 하나만 있을 때 문제가 없지만 방침이 바뀌고 다른 요소에도 #id와 같은 스타일을 부여하려고 할 때 문제가 발생한다.
스타일을 #id 로 변경하면 되지만 이름을 바꿀지 여부를 선택해야 합니다 .class.
이름을 바꾸면#id JavaScript를 수정해야 합니다.
JavaScript 수정을 피하는 것은 인지상정입니다.#id의 방식은 CSS의 이름을 JavaScript의 변수 이름이나 함수 이름으로 사용하지 않는 CSS 구성 방안으로 여겨진다.
그곳에서 JSCSS의 존재 의미가 생겼다.
CSS 이름을 JavaScript 변수 이름과 함수 이름으로 사용하고 싶습니다.
헤드 플러스l-*가 아니라 JSCSS에서 헤드 플러스js-입니다.
채택된 개념은 접두사를 붙인 명명 규칙만 있다. 이
그럼에도 불구하고 js_ 등에서 자바스크립트부터 클래스를 사용한다면 CSS만 변경할 수 없다.머리에 l를 붙여서 레이아웃이라는 뜻을 가진 것을 document.getElementsByClassName와js-로 변경하는 것도 좋지 않다.CSS는 JavaScript와 완전히 분리될 수 없습니다.자바스크립트와 CSS는 모두 한 사람이 개발할 때 문제가 없지만 많은 사람들이 개발할 때 한 번에 결정한 CSS의 이름을 간단하게 변경할 수도 없고 변경해서는 안 된다. ↩
Reference
이 문제에 관하여(JSCSS의 제안), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/querykuma/items/9980dcf5fe9369e032c0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
JSCSS에서 JavaScript의 변수 이름 또는 함수 이름으로 사용되는 CSS의 이름(ID 변수만)
js_*을 사용합니다.이외에도 CSS 사용
l-*을 사용하여 JavaScript의 변수 이름과 함수 이름을 CSS 이름으로 사용하지 않습니다.왜 "l-*" 접두사가 안 돼요?
자바스크립트 프로그램은 l-* 접두사-를 감법으로 해석하기 때문에 함수 이름과 변수 이름이 성립되지 않습니다.
"l-*" 접두사 실패 예
JavaScript 프로그램<div class="l-header">
<button id="l-header__button">
ボタン
</button>
</div>
<script>
function l-header__button_click() {
console.log('click');
}
l-header__button.addEventListener(
'click',
l-header__button_click
);
</script>
JavaScript는 접두사-를 뺄셈으로 해석하고 함수l-header__button_click 및 ID 변수l-header__button는 오류로 인해 생성되지 않음
"js_*" 접두사 성공 사례
JavaScript 프로그램<body>
<div class="l_header">
<button id="js_header__button">
ボタン
</button>
</div>
<script>
function js_header__button_click() {
console.log('click');
}
js_header__button.addEventListener(
'click',
js_header__button_click
);
</script>
</body>
함수js_header__button_click 및 ID 변수js_header__button가 생성되어 일관성 있고 오류가 발생하지 않는 JavaScript 프로그램이 됩니다.
감상
접두사를 붙이는 게 좋을 것 같아서 FLOCSS와 SMACSS를 사용해 봤는데 자바스크립트 프로그램을 쓸 때 사용하기 어려웠어요.
왜 안 해요?
소감의 후속
l_*에 스타일을 부여할 때 같은 페이지에 하나만 있을 때 문제가 없지만 방침이 바뀌고 다른 요소에도 #id와 같은 스타일을 부여하려고 할 때 문제가 발생한다.
스타일을 #id 로 변경하면 되지만 이름을 바꿀지 여부를 선택해야 합니다 .class.
이름을 바꾸면#id JavaScript를 수정해야 합니다.
JavaScript 수정을 피하는 것은 인지상정입니다.#id의 방식은 CSS의 이름을 JavaScript의 변수 이름이나 함수 이름으로 사용하지 않는 CSS 구성 방안으로 여겨진다.
그곳에서 JSCSS의 존재 의미가 생겼다.
CSS 이름을 JavaScript 변수 이름과 함수 이름으로 사용하고 싶습니다.
헤드 플러스l-*가 아니라 JSCSS에서 헤드 플러스js-입니다.
채택된 개념은 접두사를 붙인 명명 규칙만 있다. 이
그럼에도 불구하고 js_ 등에서 자바스크립트부터 클래스를 사용한다면 CSS만 변경할 수 없다.머리에 l를 붙여서 레이아웃이라는 뜻을 가진 것을 document.getElementsByClassName와js-로 변경하는 것도 좋지 않다.CSS는 JavaScript와 완전히 분리될 수 없습니다.자바스크립트와 CSS는 모두 한 사람이 개발할 때 문제가 없지만 많은 사람들이 개발할 때 한 번에 결정한 CSS의 이름을 간단하게 변경할 수도 없고 변경해서는 안 된다. ↩
Reference
이 문제에 관하여(JSCSS의 제안), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/querykuma/items/9980dcf5fe9369e032c0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<div class="l-header">
<button id="l-header__button">
ボタン
</button>
</div>
<script>
function l-header__button_click() {
console.log('click');
}
l-header__button.addEventListener(
'click',
l-header__button_click
);
</script>
<body>
<div class="l_header">
<button id="js_header__button">
ボタン
</button>
</div>
<script>
function js_header__button_click() {
console.log('click');
}
js_header__button.addEventListener(
'click',
js_header__button_click
);
</script>
</body>
접두사를 붙이는 게 좋을 것 같아서 FLOCSS와 SMACSS를 사용해 봤는데 자바스크립트 프로그램을 쓸 때 사용하기 어려웠어요.
왜 안 해요?
소감의 후속
l_*에 스타일을 부여할 때 같은 페이지에 하나만 있을 때 문제가 없지만 방침이 바뀌고 다른 요소에도 #id와 같은 스타일을 부여하려고 할 때 문제가 발생한다.스타일을
#id 로 변경하면 되지만 이름을 바꿀지 여부를 선택해야 합니다 .class.이름을 바꾸면
#id JavaScript를 수정해야 합니다.JavaScript 수정을 피하는 것은 인지상정입니다.
#id의 방식은 CSS의 이름을 JavaScript의 변수 이름이나 함수 이름으로 사용하지 않는 CSS 구성 방안으로 여겨진다.그곳에서 JSCSS의 존재 의미가 생겼다.
CSS 이름을 JavaScript 변수 이름과 함수 이름으로 사용하고 싶습니다.
헤드 플러스
l-*가 아니라 JSCSS에서 헤드 플러스js-입니다.채택된 개념은 접두사를 붙인 명명 규칙만 있다. 이
그럼에도 불구하고
js_ 등에서 자바스크립트부터 클래스를 사용한다면 CSS만 변경할 수 없다.머리에 l를 붙여서 레이아웃이라는 뜻을 가진 것을 document.getElementsByClassName와js-로 변경하는 것도 좋지 않다.CSS는 JavaScript와 완전히 분리될 수 없습니다.자바스크립트와 CSS는 모두 한 사람이 개발할 때 문제가 없지만 많은 사람들이 개발할 때 한 번에 결정한 CSS의 이름을 간단하게 변경할 수도 없고 변경해서는 안 된다. ↩ Reference
이 문제에 관하여(JSCSS의 제안), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/querykuma/items/9980dcf5fe9369e032c0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
