Same (sorta), I will forever be in love with SASS and BE (BEM without the modifiers). At least with SASS Modules and conditionally applying classNames I can immediately see what class is being applied for a certain condition and just by its name I can probably tell what it does without having to go into its source.īut that's just me and my personal experience. I'm also working on a project that uses styled-components and even though I do like type safety we get with that because we use Typescript, it also makes every little styling its own component and to see any conditional logic for styling I always have to jump to source of a styled component to see what's going on. I still prefer SASS Modules compared to CSS-in-JS (emotion, styled-components) because you are still "mostly" writing just regular CSS that is closer to the native web. But other than that, it works really well and I don't have to leave comments on PRs like "hey the name of this class doesn't adhere to BEM principles, it should be this and that etc." This approach works nicely in most situations except few edge cases where styles need to be shared or something kinda needs to be global, then it's not so elegant anymore and in a single file. It's easier to get people on the same page because there is no specific naming convention like BEM and people don't have to worry about naming things because everything is locally scoped. These days when working with React, the projects that I usually work on use SASS Modules and that also scales nicely. It also allowed me to build UI faster because I wouldn't have to apply same spacing values all over again for each component, but could just apply a utility class name to some wrapper element and get the spacing that I want. It worked quite nicely for projects that I've been working on. Some more common things like spacing (padding, margin), colors, and maybe some flex/block properties would be mostly in utility classes and everything else would be BEM. When using BEM, I've usually went with BEM + utility classes approach. Simpler flat styling allows easier per situation override if needed and you don't have to battle CSS selector nesting and specificity that much at all. It also produces flat styling without horrible nesting which is a big plus in my book. People are also detracted from BEM because of it's syntax and because it "looks ugly" to them, but once you actually start using it, your CSS becomes a breeze to use and read because its "standardized" in some way. Getting everyone on board is usually the hardest part. BEM can scale really well, but keeping it consistent is a problem when you have multiple people working in a codebase. The problem with BEM isn't BEM itself, it's getting your coworkers, new developers and external agencies to understand and follow the syntax
0 Comments
Leave a Reply. |