CSS BEM에 관하여..

Naming

• 참고 : http://getbem.com/naming/

아래가 bem에서 사용하는 예제코드인데 --나 __ 허용되는듯하고 모디파이어는 -같이 하나만 사용하는것도 허용되는듯하다.

{BLOCK}--{ELEMENT}-{MODIFIER} 형태로 작성하는것이 좋아보인다.

만약 이름에서 두 단어를 조합해야하는 경우라면 redTheme로 사용하던지 구분자를 피하는 red-theme나 red_theme로 사용하여 조합하는것이 좋아보인다. 개인적인 경험으론 이부분은 카멜이 더 좋았다.

html

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

css

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

bem style css for react native

다른것들보다 RN에서는 BEM형식으로 스타일을 마크업하는것이 가장 합리적으로 보였다. 아무리 컴포넌트별로 스타일링을 하지만 일관적인 규칙유지가 가능하고, DOM에서 인식이 쉽다. (사실 요소들은 스타일의 이름으로 유추해내는 경우가 대부분이다.)

<View style={[css.a, css.b]} /> 형태로 외부 스타일을 불러와서 적용할 수 있는데 RN의 스타일시트 마크업은 Object 형식으로 작성하게 된다.
그래서 key값에 - 문자가 들어갈 수 없기 때문에 _으로 사용해야하는데 쉬프트키를 많이 눌러대니 힘들다. -_-;

결과적으로 {BLOCK}__{ELEMENT}_{MODIFIER} 이런형태로 가게 되는데 두 단어 조합을 사용한다면 카멜표기법으로 가는수밖에 없어 보였다.

const style = StyleSheet.create({
  form : { }
  form__theme_xmas { }
  form__simpleBox { }
  form__submit_disabled { }
});