gistfile1.txt

알겠습니다. 아래는 1번부터 10번까지의 CSS BEM 굿 케이스와 베드 케이스 예시를 포함한 Markdown 파일 내용입니다.

```markdown
# CSS BEM Good Case and Bad Case Examples

## 1. Good Case: Clear Block Naming
```css
/* Good */
.header {
    background-color: #f8f9fa;
    padding: 20px;
}
```
## 1. Bad Case: Vague Block Naming
```css
/* Bad */
.container {
    background-color: #f8f9fa;
    padding: 20px;
}
```

## 2. Good Case: Clear Element Naming
```css
/* Good */
.header__title {
    font-size: 24px;
    font-weight: bold;
}
```
## 2. Bad Case: Vague Element Naming
```css
/* Bad */
.header__text {
    font-size: 24px;
    font-weight: bold;
}
```

## 3. Good Case: Using Modifiers for Variations
```css
/* Good */
.button--primary {
    background-color: #007bff;
    color: white;
}
.button--secondary {
    background-color: #6c757d;
    color: white;
}
```
## 3. Bad Case: Using Multiple Classes Instead of Modifiers
```css
/* Bad */
.button.primary {
    background-color: #007bff;
    color: white;
}
.button.secondary {
    background-color: #6c757d;
    color: white;
}
```

## 4. Good Case: Nested Elements
```css
/* Good */
.card__header {
    font-size: 18px;
    margin-bottom: 10px;
}
.card__body {
    font-size: 14px;
}
```
## 4. Bad Case: Deeply Nested Selectors
```css
/* Bad */
.card .header {
    font-size: 18px;
    margin-bottom: 10px;
}
.card .body {
    font-size: 14px;
}
```

## 5. Good Case: Avoiding Overly Generic Names
```css
/* Good */
.nav__item--active {
    font-weight: bold;
}
```
## 5. Bad Case: Overly Generic Names
```css
/* Bad */
.nav__link.active {
    font-weight: bold;
}
```

## 6. Good Case: Consistent Modifier Use
```css
/* Good */
.input--error {
    border-color: red;
}
.input--success {
    border-color: green;
}
```
## 6. Bad Case: Inconsistent Modifier Use
```css
/* Bad */
.input.error {
    border-color: red;
}
.input.success {
    border-color: green;
}
```

## 7. Good Case: Naming Modifiers After States
```css
/* Good */
.menu__item--open {
    display: block;
}
.menu__item--closed {
    display: none;
}
```
## 7. Bad Case: Naming Modifiers Vaguely
```css
/* Bad */
.menu__item.active {
    display: block;
}
.menu__item.inactive {
    display: none;
}
```

## 8. Good Case: Using BEM with JavaScript
```html
<!-- Good -->
<div class="modal modal--hidden"></div>
<script>
    document.querySelector('.modal').classList.toggle('modal--hidden');
</script>
```
## 8. Bad Case: Using JavaScript with Non-BEM Classes
```html
<!-- Bad -->
<div class="modal hidden"></div>
<script>
    document.querySelector('.modal').classList.toggle('hidden');
</script>
```

## 9. Good Case: Clear BEM Structure
```css
/* Good */
.form__input--large {
    width: 100%;
}
```
## 9. Bad Case: Mixed Naming Conventions
```css
/* Bad */
.form__input.large-input {
    width: 100%;
}
```

## 10. Good Case: Reusable Components
```css
/* Good */
.alert__message--warning {
    color: orange;
}
.alert__message--error {
    color: red;
}
```
## 10. Bad Case: Non-Reusable Components
```css
/* Bad */
.warning-message {
    color: orange;
}
.error-message {
    color: red;
}
```
```

위의 내용을 복사하여 Markdown 파일로 사용하시면 됩니다. 추가 사례가 필요하면 말씀해 주세요!