Do not use an extra empty div for styling, when the same effect can be achieved with using CSS on pre-existing element

[sophie-cluml]

Background

#98 (comment)

Expected result

현재 코드 상, 다음과 같은 AS-IS 코드가 있다면 TO-BE 코드와 같은 모습으로 변경되도록 합니다.

• AS-IS

<div class="some-box">
...
</div>
<div class="divider"></div>

<style>
.divider {
  border: 1px solid #000;
 }
</style>

• TO-BE

<div class="some-box">
...
</div>

<style>
.some-box {
  border-bottom: 1px solid #000;
}
</style>

[sophie-cluml]

@div-seungha 제가 이슈를 대신 생성하였습니다. 이슈를 해결하는 데에 더 도움이 되는 내용이 있다면 추가해주시면 감사하겠습니다.

[sehkone]

내용이 없는 <div class="space"></div>는 정적으로 사용되기 보다는 동적으로 사용되고 있을 것입니다.

즉, AS-IS는 아래와 같습니다.

...
    <div class="some-box">
        ...
    </div>
    {
        if condition {
            html! {
                <div class="space">
                </div>
            }
        }
    }
...

TO-BE는 아래처럼 해야합니다.

...
    let class = if condition {
        "some-box-with-space"
    } else {
        "some-box"
    };
    html! {
        <div {class}>
            ...
        </div>
    }
...

CSS에는 아래처럼 되어야 합니다.

.some-box {
    ...
}
.some-box-with-space {
    ...
}