CSS 덮어쓰기, 좋은 코드의 원칙

취업하면 새롭게 구축하는것보다 남들이 짜놓은 개떡같은 코드 수정하는 일을 더 많이 하게 될 것임..

 

[CSS 덮어쓰기 잘하는 법]

• CSS 원본파일을 건들면 안되는 경우 새로운 CSS 파일로 덮어쓰기 해야함
• Bootstrap은 덮어쓰기 안함, 클래스명 추가만 하면 됨.

1. 그냥 같은 클래스명 하단에 쓰기

<link href="css/main2.css" rel="stylesheet"> 헤드에 추가로 쓰고,
main2.css 파일에 같은 이름의 클래스 새로 생성

• (기존) class 명: main-content
• (변경) class 명: main-content custom
  --> color: skyblue 로 밑에 한번 더 쓰기
  --> (밑에 있는 파일, 같은 파일이면 밑에 작성한 것이 우선 적용됨)
  --> 그래서 @media 쿼리고 맨 하단에 작성하는 것임

2. 우선순위 높이기 (비추)

• Class 선언은 10점, id 부여는 100점, style은 1000점
• !important 는 10000점 --> color:green !important;

3. Specificity 높이기

.main-background .custom {
    color: orange;
}

.custom {
    color: green
}

• .main-background .custom { (클래스명 두 개로 20점)
• div.main-background .custom { (21점)
• .custom { (뒤에 작성한 것이어도 10점)
  -->div.main-background p.custom { (22점, 이런식으로 점수 높여야 함)

[좋은 코드 쓰기의 원칙]
1. 나중에 수정/관리가 쉬운 코드
2. 확장성이 좋은 코드(재활용 가능? 활용해서 다른 코드 만들기)