TIL 02 | CSS구조화 외

CSS의 구조화

none folder

• style.css
  모든 스크린에 적용될 수 있는 스타일을 기록
  ex) font-family, background-color 등

• reset.css
  브라우저에 의해 설정된 margin 값을 초기화 함. 모든 요소를 직접 디자인하기 위함

• variables.css
  한 프로젝트에서 공통적으로 사용될 색상값 등을 변수로 지정하여 입력 및 사용을 조금 더 편하게 함
  https://velog.io/@1703979/css8 > Custom Property

folder

• components.css
  다른 화면에서도 사용하는 코드 (재사용)
• screen.css
  특정 화면에서만 사용하는 코드

id / BEM 작성법 비교

• id로 작성할 경우 : not이나 attribute선택자 사용
• BEM으로 작성할 경우 : not이나 attribute선택자 사용 안 해도 됨

자세한 코드는 혹시 몰라서 (강의 내용이라) 비공개로 돌려두었다.
같은 내용을 두 가지 버전으로 작성해보았는데 작은 프로젝트라 그런건지 느낀 점도 사소했음.
id로 작성하면 html에서 편한 대신 css에서 귀찮아지고
bem으로 작성하면 css에서 편한 대신 html에서 귀찮아지는 느낌?
id때보다 요소 하나하나에 class를 설정을 해줘야 했어서.. 대신 id로 하면 이걸 css에서 해주고 있어야 하니, 조삼모사 같기도 하고...
조금 더 많은 클론 코딩을 해보면 확 느낄 수 있지 않을까?
우선은 현재 내 마음속에선 bem이 약간 더 우세함😎 .

:not() 속성, [] attribute 선택자

#login-form input:not([type="submit"]) {
  블라블라블라
}

• :not() 속성
  input들 중에서 type="submit"인 것을 제외하고 적용

• [] attribute 선택자
  [value="Log In"] 과 같이 attribute를 선택함

inherit

color: inherit; : 부모 요소와 같은 속성 사용
이때, 부모 요소로부터 받을 속성이 없다면 CSS default 값을 사용한다.

CSS default value 참고자료