DEV Community

Discussion on: What should production CSS look like? Share your layout-to-web workflow

Collapse
 
turnerj profile image
James Turner

For your specific questions, see below. I'll post another comment for your other points. :)

  1. Sometimes I get mobile designs, sometimes I just have to improvise. Normally though, that improvisation is pretty simple like just re-arranging items. I don't often have to fully switch out interfaces from desktop when going down to mobile. That said, I normally do have a designer I can talk to if I really am not sure about what to do.

  2. Honestly, I don't actually use a grid layout. I have looked at them before but I haven't found one that I'd want to stick with.

  3. I normally have quite a lot of media queries, it probably plays a bit into #2 about why. I write a new media query every time something "breaks" in the layout like if it overflowed off the screen horizontally or wraps in an unusual way. I am aiming for as fluid of a responsive layout as I can. I aim to get breakpoints down as low as 320px.

  4. I use CSS to do all the actual heavy lifting of styling the animation. I will use JS to add/remove classes on a timed sequence if the animation is that complex. The browser can make better use of hardware rendering via CSS transforms etc.

  5. This is going to be an uncommon opinion but I'm not actually a fan of SASS/LESS etc. I do understand what it can provide like removing repetition from CSS and allowing for easier to manage complex styles (eg. variables). That said, I've never hit something with vanilla CSS that I consider a problem that needs a solution like SASS etc. As for BEM, I understand what it can help with but it is too verbose for my liking and I feel makes the styling actually more complicated. I guess these both can be summarized that SASS and BEM solve problems but they don't solve my problems.

Collapse
 
jenc profile image
Jen Chan

"SASS and BEM solve problems but they don't" โ€“ I feel this way too. Maybe my projects currently doesn't have such a variety of templates/views. I've never had to create something with logins, accounts, dashboards and so many bells and whistles yet. In which case, I really could see scoped or SASS working out. I like the nesting in SASS but it seems counterintuitive to BEM. These kinds of things are confusing and at the moment I guess whatever works doesn't hurt, but I could see it being a leg up in a job app.

Collapse
 
turnerj profile image
James Turner

I've worked on a few big applications in vanilla CSS and while I wouldn't be able to say how it would have turned out with SASS, I didn't really have a problem building it.

Obviously YMMV but I think the approach to take is having clean and concise CSS, broken apart in separate files where it makes sense. This can be achieved without needing something like SASS.

Collapse
 
jenc profile image
Jen Chan

I improvise a lot. But I'd like to develop a concise and confident way of going about things. The whole grid thing is relatively new to me as I only used flexbox only before. However recently tried grid with flexbox and some nested grids inside... took much longer but there is way more control.

Collapse
 
turnerj profile image
James Turner

I think a lot about CSS (and programming in general) is finding what works for you. Learning ideas and concepts from others is important but really you are the one that needs to write the code that you need to deal with later. :)

Thread Thread
 
jenc profile image
Jen Chan

Absolutely. I think after using this for a few years and not quite paying attention to BEM or a lot of CSS frameworks has produced a lot of fomo and confusion, esp trying to get to โ€œindustry standardโ€ and itโ€™s time to try a few things to see what sticks. My way has been super detailed base styles or a class per styled element, then media queries for different screen widths. I discover I could be writing a lot less.

I also like the idea of multiple sheets for different components.