1. BEM
일종의 CSS 작명 규칙
' - ' : 일반적인 작명
<div class='sign-in'></div>' _ _ ' : ~의 일부분
<body>
<div class='body__container'></div>
</body><div class="container">
<div class="container__item"></div>
</div>' -- ' : ~의 상태
<div class='btn'></div>
<div class='btn--primary'></div>물론 이게 고정된 방식은 아니다 회사마다 스타일이 다를수 있기에 회사방식에 맞추는게 맞지만 방구석 개발자 라면 일단은 쓰는것을 추천한다
2. 중앙 정렬(마진 제로 오토)
header {
max-width:1000px;
margin: 0, auto
}위 아래 값을 주지 않고 좌우 값을 균등하고 주어 중앙에 배치한다 중요한점은 넓이 값을 꼭 설정해준다
3. ClearFix
.clearfix::after {
content: "";
clear: both;
display: block;
}
.float--left {
float: left;
}
.float--right {
float: right;
}float으로 인하여 내용물이 제자리 위치하기 않고 깨져버리는 현상이 발생시 사용한다
4. 부분별로 나눠서 진행한다
<!-- HEADER -->
<header>
~~~~코드
</header>
<!-- SECTION -->
<section>
~~~~ 코드
</section>
<!-- FOTTER -->
<footer>
~~~~ 코드
</footer>뭐 당연한 이야기지만 기존에 코드를 작성했을때는 div로 클래스 난도질을 했었지만 확실히 시멘틱 태그 구분하고 섹션을 나눠서 진행하니깐 가독성이 좋았다
5. Vendor Prefix (브라우저 업체별 접두사)
.input--text::-webkit-input-placeholder {
color: #cacaca;
}
.input--text::-ms-input-placeholder {
color: #cacaca;
}
.input--text::-moz-input-placeholder {
color: #cacaca;
}CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하면 된다
