한가지 일만 담당하도록 코드를 쪼개면 됩니다
추상화 수준을 쌓아올리면 됩니다
캡슐화를 하면 됩니다
내부 구조가 바뀌어도
가져다 사용하는 곳에서는
아무것도 바꿀 필요가 없습니다
(바꿔 말하면)
많은 곳에서 사용되고 있었어도
모든 곳을 일일이 고치지 않으면서
내부 구조를 바꿀 수가 있습니다
UI가 캡슐화된 단위
컴포넌트로 만들만한 녀석들:
// toggle을 사용하고싶은 곳에서
<div>
<span class="toggle-wrapper">
<input class="toggle" id="toggle" type="checkbox" checked>
<label class="toggle-inner" for="toggle">
<span class="toggle-text"></span>
</label>
</span>
</div>
// ^ 위와 같은 마크업 구조를 일일이 작성함
// 후에 디자인 변경등의 이슈로 마크업이 바뀌어야 할 때
// toggle을 사용하는 모든 코드가 같이 수정되어야 함
// toggle을 사용하고싶은 곳에서
render() {
return <div>
//v v v v v v v v v v v v v v
<Toggle checked={true}/>;
//^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^
</div>;
}
// Toggle 내부가 바뀌어도 이 코드는 고칠 필요가 없음
// 게다가 코드가 단순해졌습니다.
// 이 코드가 본래 하고자하는 것에 집중할 수가 있습니다.
// -> 고치는게 쉬워졌습니다.
제낄게요
독립적인 기능으로 쪼개진 단위
스타일시트에서 모듈로 만들만한 녀석들:
그 자체로 가져다 쓰일 수 있어야 합니다
예를 들자면 mo의 `_colors.scss`는 독립적인 모듈입니다
// 예시) dodo-landing/landing/static/css
// /campaign/paper_coupon.scss 에서 따옴
@import '../../_sass/mo/_colors.scss';
// _colors.scss 하나만 import 하면
$image-path: '/static/images/campaign/';
$background-size-path: '/bower_components/background-size-polyfill/backgroundsize.min.htc';
body.paper-coupon {
.section-cover {
...blabla
// 별 부작용 없이 바로 변수를 가져다 쓸 수 있습니다.
background-color: $grey-3;
}
...blabla전역변수를 사용하지 않기 때문에
어떤 변수가 어떤 곳에 정의돼있는지
코드를 처음 보는 사람이 쉽게 찾아갈 수 있습니다
쪼개져있으면 사용하는 쪽에서...
css 파일을 나눠서 컴파일하면 항상 생깁니다
그렇기 때문에 다양한 요구사항에
유연하게 대처할 수 있는 구조로 바뀌어야 한다고 생각합니다
예를 들자면 두부의 `_variables.scss`는 독립적이지 않습니다
// 가상의 코드
@import 'dooboo/_variables.scss';
body {
background: $bg-grey; // 컴파일 에러
}
// _variables.scss
$bg-grey: $grey-0;
// `$grey-0`이 `_variables.scss`안에 없기 때문`_variables.scss`안에서 `_colors.scss`를 import 한다면
// `_variables.scss`만 import 하고도
// `$bg-grey`를 사용할 수 있습니다.
@import 'dooboo/_variables.scss';
body {
background: $bg-grey; // 이상없음
}
// _variables.scss
@import 'mo/_colors.scss';
$bg-grey: $grey-0;
// `$grey-0`은 `_colors.scss`에 들어있음`_variables.scss`의 제목 주석들만 모아보았습니다
// Layout
// Grid
// Service color
// Type
// Text color
// General UI
// Checkbox and Radios
// Toggle
// for muenus like "Dropdown menus", "Sidebar menus"
// Sidebar
// Page Header
// Subnav
// Footer
// Buttons
// Label
// Alerts
// Dropdown
// Navbar
// Topnav
// Tables
// Forms
// Modal
// Toast
// Panels
// Hero
// Section
// Transition
// Z-index master list