Bulma를 맛 보고

프로젝트에서 선택한 CSS 프레임워크 Bulma를 맛보기 처럼 써보고 느낀 점이다.

 

긍정적인 면과 부정적인 면이 있는데 사실 부정적인 면이 더 크게 느껴진다.

 

우선 가장 대중적이고 안정성이 확실한 Bootstrap을 사용하지 않은 이유는

 

1. 너무 무겁다.
2. 기능이 불필요하게 너무 많다.
3. 부트스트랩을 사용한 토이프로젝트를 해봐서 부트스트랩틱한 디자인도 벗어날 겸 새로운 프레임워크를 써보고 싶었다.

그리고 Bulma를 선택한 이유는

 

1. Bulma는 css파일 하나만으로 적용하는 가벼운 프레임워크다
2. 모든 것이 class 기반이기 때문에 tag에 디자인이 들어가지 않아 내가 직접 만지고 싶은 부분을 간섭하지 않는다.
3. Flex 기반이기 때문이다. Flex를 거의 사용하지 않았고 잘 몰랐다.

---

우선 내 나름으론 큰 프로젝트에 css프레임워크를 적용한건 처음이라 느낀 점이 많아서 이 글을 쓰고 싶었다.

느낀 단점 중 핵심만 나열하자면

 

• tag가 너무 깊게 파고 들어가도록 되어있다. Bulma의 문제인지 프레임워크라는 것을 쓰면 어쩔 수 없는 것인지 실력이 부족한 것인지 모르겠다.
• 위내용 때문에 div를 난사하다 싶이 쓰게 된다. 하나의 div에 class를 중첩하면 충돌이 일어나는 경우도 있었고 bulma.min.css 를 열어보니 .columns>.column 처럼 자식/자손 선택자로 적용된 속성이 꽤 있었다.
• class가 굉장히 길어진다. 태그에 style을 넣는게 부적절하기도 하고 가독성이 심하게 떨어져서 css가 나온 것으로 알고 있는데 약간 그 의미를 상실하는 느낌이다. bulma의 방식이 style을 넣는 것과 크게 다르지 않은 부분이 있기 때문이다. 예) className="has-background-black is-large is-primary is-3-mobile..."
• class 기반인 것 치고 특정 디자인을 위한 포맷이 꽤 정해져있는 편이다. 예를들어 select+input+submit이 이어져 있는 디자인을 구현하고 싶으면 p태그로 단위를 강제로 끊어야 한다.

여튼... 이런 문제를 겪었다. 다른건 습득하면 되지만 div가 계속 깊게 들어가는게 영 마음에 안들었다.

그래도 일단 끝까지 만들어 보려고 한다. 아직 header부분만 만진 수준이라서...