์ฐธ๊ณ ๋งํฌ
- Two main principles
- Separate Structure and Skin
- Separate Container and Content
- 10 best practices
- Create a component
- Use consistent semantic styles
- Design modules to be transparent on the inside
- Be flexible
- Learn to love grids
- Minimize selectors
- Separate structure and skin
- Separate container and content
- Extend objects by applying multiple classes to an element
- Use reset and fonts from YUI
width
, height
, padding
, margin
๋ฑ font
๊ด๋ จ ์์ฑ, color
, background
, border
๋ฑ ์ฐธ๊ณ ๋งํฌ
font-family
, font-size
, reset style
, <img>
๊ณตํต ์คํ์ผ ๋ฑ/* Examples of Base styles */
html, body, form {
margin: 0;
padding: 0;
}
input[type=text] {
border: 1px solid #999;
}
a {
color: #039;
}
a:hover {
color: #03C;
}
header
, main area
, footer
, side bar
์ ๊ฐ์ ์น ์ฌ์ดํธ์์ ํฐ ํ์ ๊ตฌ์ฑํ๋ ๋ชจ๋์ ๊ดํ ๊ท์นheader
, footer
์ ๊ฐ์ ์ฃผ์ ๋ ์ด์์์๋ id
์ ํ์๋ฅผ ์ฌ์ฉํ์ฌ ์คํ์ผ๋งํ์ง๋ง, ํ์ด์ง์ ๊ตฌ์ฑ์์์ ๋ฐ๋ผ class
์ ํ์๋ฅผ ์ ์ ํ ์ฌ์ฉํ๊ธฐ๋ ํ๋ค. #header, #article, #footer {
width: 960px;
margin: auto;
}
#article {
border: solid #CCC;
border-width: 1px 0 0;
}
Module : ๋ ์ด์์ ์์ ๋ฐฐ์น๋๋ ๋ชจ๋ ์์๋ฅผ ์๋ฏธ.
๋ฐ๋ณต๋๋(์ฌ์ฌ์ฉ ๊ฐ๋ฅํ) ์์๋ค์ด๊ธฐ ๋๋ฌธ์ id
์ ํ์๋ฅผ ์ฌ์ฉํ์ง ์๊ณ , ์์ ์ ํ์ ์ฌ์ฉ์ ์ต์ํ ํ๋ค.
=> ์์ ์ ํ์๋ ์์ ์์์๋ง ์ ์ฉ
๋น์ทํ ๋ชจ๋ ์์์๋ ๋ชจ์์ด ์กฐ๊ธ์ฉ ๋ค๋ฅผ ๊ฒฝ์ฐ, sub-class
๋ฅผ ๋ง๋ ๋ค
=> btn-small
, btn-long
๋ฑ
State : ํน์ ์ํ์ ์์ ๋ ๋ชจ๋ ๋๋ ๋ ์ด์์์ด ์ด๋ป๊ฒ ํ์๋๋์ง ์ค๋ช
ํ๋ ๋ฐฉ๋ฒ
=> ์จ๊ฒจ์ ธ ์๊ฑฐ๋, ํ์ฅ๋์ด ์๊ฑฐ๋, ํ์ฑ/๋นํ์ฑ ์ํ ๋ฑ
๊ธฐ์กด ์คํ์ผ์ ๋ฎ์ด์ฐ๊ฑฐ๋ ํ์ฅํ๋๋ฐ ์ฌ์ฉ
sub-class
์ ๋ค๋ฅธ ์ : ๋ ์ด์์์ด๋ ๋ชจ๋์ ๋ ๋ค ์ ์ฉ ๊ฐ๋ฅํ์ง๋ง,sub-class
๋ ํ ๋ฒ ์ ์ฉ๋๋ฉด ๋ฐ๋์ง ์๋ ์์ฑstate
๋ Javascript๋ฅผ ์ด์ฉํ์ฌ ํ์ํ ๋ ๋ฃ๊ฑฐ๋ ๋บ ์ ์๋ค.is
๋ผ๋ ์ ๋์ฌ ์ฌ์ฉis-hidden
, is-active
๋ฑ .tab {
background-color: purple;
color: white;
}
.is-tab-active {
background-color: white;
color: black;
}
background-image
), ์์(background-color
, color
) ๋ฑ์ ์๋ฏธ /* in module-name.css */
.mod {
border: 1px solid;
}
/* in theme.css */
.mod {
border-color: blue;
}
์ฐธ๊ณ ๋งํฌ
๊ฐ๋ : ์๋ฑ์ค(Yandex)์ฌ๊ฐ ๋ง๋ ์ค๊ณ ๋ฐฉ๋ฒ์ผ๋ก, ๊ธฐ๋ณธ์ ์ผ๋ก OOCSS์ ๊ฐ์ ๋ชจ๋ ๊ธฐ๋ฐ์ ๋ฐฉ๋ฒ์ ๊ธฐ์ด๋ก ํ๋ค.
๊ธฐ๋ณธ ๊ท์น : id
์ ํ์์ ์์ ์ ํ์๋ฅผ ๊ถ์ฅํ์ง ์๋๋ค.
=> class
์ ํ์๋ง ์ฌ์ฉํ๋ ์ด์ : ๊ฐ์ค์น ๊ณ์ฐ์ ์ํํ ํ๊ธฐ ์ํด (z-index
๋ฅผ 10๋จ์๋ก ์ฌ์ฉํ๋ ๊ฒ๊ณผ ๊ฐ๋ค.)
Block
class
๋ค์ด๋ฐ์ ๋ชฉ์ ์ด ๋ช
ํํด์ผ ํ๋คElement
block
์ ๊ตฌ์ฑํ๋ ์์, block
์ ์ข
์๋์ด์ผ ํ๋ค.block
์ ํด๋์ค ์ด๋ฆ์ ์์๋ฐ์ ์ ๋์ฌ๋ก ์ฌ์ฉํ๊ณ , element
์ ํด๋์ค ์ด๋ฆ๊ณผ ์ธ๋๋ฐ ๋ ๊ฐ๋ฅผ ์ด์ฉํด ์ฐ๊ฒฐํ์ฌ ์ฌ์ฉblock__element
element
์์ ๋ element
๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ, ๋ค์ด๋ฐ์ element
๋ผ๋ฆฌ ์ค์ฒฉํ์ง ์๋๋ค.opacity-half__btn__txt
( X ) / opacity-half__txt
( O )Modifier
block
์ด๋ element
์ ๋ชจ์ต/์ํ/์์ง์์ ์ ์ <div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>
/* Use modifier class name as selector: */
.block--hidden { }
/* To alter elements based on a block-level modifier */
.block--mod .block__elem { }
/* Element modifier */
.block__elem--mod { }