Bulma CSS 프레임워크 사용의 장점

재사용 가능한 스타일은 최종 사용자에게 만족스러운 인터페이스를 제공하면서 프로그램 논리에 집중하려는 개발자에게 매우 유용합니다. Material UI는 다양한 스타일 구성 요소를 제공하는 인기 있는 스타일 프레임워크입니다. 이것이 내가 종종 Bulma CSS Framework를 사용하는 이유입니다.

더 작은 패키지 크기

Bulma는 순수 CSS/SCSS 스타일링 프레임워크이기 때문에 기능을 위해 Javascript가 포함된 다른 스타일링 프레임워크에 비해 전체 파일 크기가 훨씬 작습니다.

다음은 다양한 스타일링 프레임워크에 대한 총 패키지 크기를 비교한 것입니다.Bulma 1.3 MB 전체 프로젝트 파일bulma.css.min 204 KB 생산에 사용된 축소된 파일
material-ui-next 48 MB

커스터마이징

스타일 사용자 정의와 관련하여 Bulma를 사용할 때 필요한 작업이 줄어듭니다.

Bulma의 기본 스타일 색상 사용자 정의

$purple: #3f51b5;
$primary: $purple;

Maerial UI의 기본 스타일 색상 사용자 정의

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    }
  }
})


function App() {
  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
    </React.StrictMode>,
  );
}

멋진 도우미 수업

Material UI와 같이 순전히 SCSS/CSS가 아닌 스타일링 프레임워크를 사용하면 프로젝트에 저장된 모든 위치에서 구성 요소를 가져와야 합니다.

그러나 순수한 CSS/SCSS 스타일 프레임워크를 사용하면 단순히 클래스 속성을 추가하여 HTML 요소의 스타일을 지정할 수 있습니다.

<button class="button">Button</button>

HTML 요소의 상단과 하단에 여백을 추가하려면 어떻게 합니까? 내 클래스 속성에 my-3를 추가하기만 하면 됩니다!

<button class="button my-3">Button</button>

Bulma의 가장 좋은 점은 순수한 CSS이기 때문에 모든 프론트 엔드 프로젝트 환경에서 작동한다는 것입니다. 개인적으로, 프로그래밍 언어를 사용하여 CSS 스타일을 자주 사용자 정의하는 것은 자연스럽지 않습니다. 특히 그렇게 하려면 CSS를 직접 편집하는 경우에 비해 20배 더 많은 타이핑이 필요합니다. CSS에 자신이 없더라도 Bulma를 사용해 보는 것이 좋습니다. 스타일도 훌륭하고 documentation도 굉장합니다!