Is mixng plain CSS "style" with Bootstrap "class" good practice?

user_16691375 0
Viewed 73

Is using plain CSS inline "style" and React-Bootstrap "className" at the same time a bad practice?

    <FormControl
        type="search"
        placeholder="Search"
        aria-label="Search"
        className="me-2"
        style={{ width: "500px" }}
    />
react-bootstrap reactjs css
2 Answers

You can overwrite bootstrap styles with inline styles because of CSS specificity. But if you need to reuse a bootstrap component in multiple places with the same specific custom styles, you should just customize the bootstrap component once with SASS. This ensures fewer duplicate styles on your part. See this.

But I would really suggest utility first frameworks (like tailwind) if you want to have unique, custom components.

user_79230590

No, it's alright. Inline css specially in React is very handy and time saving sometimes. As long as it does not create confusion in future, writing inline style is ok, no hard rule. As per your code whenever needed inspecting an element will show obvious inline style, so no confusion arises there. Keep up the good work <3

user_149833720
Related