Modularising CSS questions

Question

저는 다른 CSS 모듈화 방법론을보고 새로운 아이디어를 구현하려고합니다. 내가보고있는 일부는 SMACSS, BEM 및 MVCSS입니다. 나침반 Susy에서 그리드 컨테이너로

.container 
    +container 
    +margin-leader 
    +margin-trailer 

+ 용기 세트이 요소를 다음 상단에 추가 :

나는 다음과 같이 SMACSS 레이아웃 규칙에 너무 내 스타일은 괜찮 내 _layout.sass 파일에 있어야합니다 것을 이해 하단 여백

이제이 요소에 border radius 및 box shadow을 추가하고 싶습니다.

이 스타일들은 레이아웃 스타일 시트에 맞지 않기 때문에 어디에 배치합니까?

두번째 문제는 다음과 같습니다

나는 기본적으로 이미지가 왼쪽 부유 할 수있는 미디어 블록과 텍스트를 만든

가 바로 뜨게 할 수 있습니다. 두 개를 뒤집은 뒤집힌 변형이 있습니다.

이미지 너비를 지정할 수 있어야하지만 어디로 가야합니까? 지금은 미디어 블록 모듈 코드의 일부로 배치했지만 확실한 것은 향후 미디어 블록 안에있는 모든 이미지가 그 너비가된다는 뜻입니다. 이미지의 너비가 다른 곳에 있어야하는 것처럼 보이지만 어디 있는지 모르겠습니다. 나는 "작은", "큰"등의 마크 업에서 이미지에 클래스를 추가 할 수 있다는 것을 알고 있지만, 벗어나려는 것이 무엇인지 생각한 마크 업에 프레젠테이션 자료를 추가하는 것과 같은 소리가 들린다.

3 문제 :

<div class="title-box"> 
    <h3 class="title-box__header">Upcoming Events</h3> 
    <div class="title-box__content"> 

    </div> 
    </div> 

내가 옆에이 상자 측의 3 할 :

나는 다음과 같은 마크 업 제목 박스 모듈을 만들었습니다. 나는 그것을하는 방법을 알고 있지만 이것을하기위한 올바른 모듈 방식을 알지 못합니다. 이견있는 사람? 첫 번째 문제를 해결하기 위해 믹스를 사용할 수 BEM 방법론에 따르면

Answer 1

1) :

<div class="container widget"></div> 

이 같은 DOM 노드에 2 개 개의 다른 블록이 있다는 것을 의미 컨테이너 (레이아웃에 대해 알고) 위젯 (테두리 반경과 그림자가있는 블록 스타일).

2) 당신은 수정과 이미지의 유형을 지정할 다음 그들에게 미디어 블록의 요소를 만들고 이러한 이미지에 클래스를 추가 할 수 있습니다 :

<div class="media-block"> 
    <img class="media-block__image"/> 
    <div class="media-block__description">Some text</div> 
</div> 

<div class="media-block media-block_float_left"> 
    <img class="media-block__image media-block__image_type_important"/> 
    <div class="media-block__description">Some text</div> 
</div> 

그래서 중요한 미디어 블록의 이미지 요소는 더 큰 크기와 스타일을 지정할 수 있습니다 .

또한 수정자를 사용하여 부유 방향을 설정할 수 있습니다.

3) 나는 당신의 질문 권한을 가지고 있는지 확실하지 않습니다하지만 난 당신이 두 가지 옵션이 있다고 생각 :

1. 스타일 예를 들어, 일부 여백 float로 타이틀 상자 자체를().
2. 다른 레이아웃으로 바깥에있는 제목 상자를 사용할 수 있다면 에 제목을 붙이십시오. 제목 상자을 캐스케이드가있는 상위 파일에 추가하십시오.