CSS Attribute Selector에 Style속성을 구분자로 사용하지 마세요

저는 가끔 Attribute Selector를 사용해서 특정 스타일을 분기처리할 때가 있습니다.
그런데 Dom이 동적으로 변경되서 작성한 Attribute Selector의 조건이 됬는데
Style 속성을 구분자로 사용할 경우 해당 스타일을 화면에 안그립니다.
예를들어 배너가 활성화되있으면 배너 아래 있는 A박스가 margin-top:0 인데
배너가 비활성화 상태가 되면 A박스는 margin-top:10px이 된야한다.

이 경우 대부분의 브라우저가 margin-top:10px을 못 그립니다.
개발자 도구의 style탭에 스타일정보가 찍히는데도요…
그런데 커스텀 속성을 구분자로 사용하면 margin-top:10px을 잘 그립니다.

– 테스트 URL : http://codepen.io/korearice/pen/GgmIx
 
또 신기한건
이 이슈는 dom이 동적으로 변경될때만 발생합니다.
최초 로딩시부터 dom이 style=”display:none” 상태이면
Dom 상태에 맞게 렌더트리를 구성해 놓은 상태이기 때문에 화면에 잘 그립니다.
왜 그런걸까요?
브라우저가 Dom의 Style 이외의 속성이 변경될 땐 CSS 선택자와 다시 매핑하려고 하는데
Style 정보가 바뀔땐 CSS 선택자와 다시 매핑하려고 안하는걸까요?
아니면 브라우저가 inline으로 박힌 Style을 그리는데 집중하느라 Style 속성 셀렉터는 탐색 안하는걸까요?
 
아무튼…
Attribute Selector사용시 Style 속성을 구분자로 사용하는건 지양해야할 듯 합니다.