CSS 2

CSS 성능 개선 방법

소규모 프로젝트에서는 상관없지만, 프로젝트가 커지면 커질수록 CSS양은 늘어나게 되고, CSS가 많아지면 많아질수록 당연히 성능도 저하된다. 성능 개선 방법 1. @import 를 사용하지 않는다. 속도 측면에서 import는 좋지 않은 방식이라는 내용이 많다. 하지만 Vue에서는 style 내부에 import로 파일을 불러오고 있는데, 해당 방식보다 더 나은 방법이 있는지는 알아봐야 한다. 추가로, index에서 모든 스타일 시트를 불러오는 것보단, 컴포넌트 별로 사용할 스타일 시트를 분리하여 불러오는 게 속도 향상에 좋다. 2. 선택자 방식 header > ul > li > p 보다는 클래스 명을 지정하여 뎁스를 줄여주는 게 좋다. 또한 태그 선택자를 사용하지 않는다. 태그 선택자의 경우 속도의 문제..

CSS 2020.07.27

CSS BEM 방법론

BEM (Block Element Modifier) 작명규칙 소문자, 숫자만을 이용하여 작명한다. 여러단어의 조합은 하이폰으로 연결하여 작명한다. (sub-header__title--color-red) 기본적으로 id (label for에서는 사용), 태그 선택자를 사용하지 않고 class 만을 사용한다. (태그 선택자는 성능 저하를 유발하기 때문에 방법론이 아니더라도 사용을 하지 않는 것이 좋다) Block Block은 재 사용할 수 있고, 독립적인 구성요소여야 한다. (header, footer, nav, logo 등) 형태 (small, big, red, blue)가 아닌 목적 (error, menu, button, success)에 맞게 결정해야 한다. 환경에 영향 받지 않아야 한다. (여백, p..

CSS 2020.07.27