DEV Community

Cover image for How it feels like to style things in 2020?

How it feels like to style things in 2020?

Madza on May 20, 2020

This article is inspired by this article. I am using the same format - a dialogue between two developers, one of which are giving different option...
Collapse
 
geekyahmed profile image
Ahmed Bankole

To be honest, I hate every part of CSS and frontend development. I found out that I suck at designing and not every designs meet to the specifications of the client.That's why I went into bacakend development and I have never once regretted my decision

Collapse
 
madza profile image
Madza • Edited

I feel you! Which technologies are you mainly working with?

Collapse
 
geekyahmed profile image
Ahmed Bankole

Well I work with Vue.js, react and JavaScript for frontend while I use node.js,express.js and PHP for backend

Collapse
 
stgonzales profile image
Stephen Goncalves

We share the same feelings hahaha

Collapse
 
madza profile image
Madza

I knew I wasn't the only one! hahah xdd

Collapse
 
nataliedeweerd profile image
šššš­ššš„š¢šž ššž š–šžšžš«š

I just use vanilla CSS with BEM methodology - no pre-processors, and the only post-process is minifying the file. šŸ¤· Gotta KISS!

Collapse
 
madza profile image
Madza

Exactly! More than enough to design everything you can think of ;)

Collapse
 
nataliedeweerd profile image
šššš­ššš„š¢šž ššž š–šžšžš«š

That's it!! And so long as your team is onboard with structure and naming methodology, you don't need anything fancy :)

Thread Thread
 
madza profile image
Madza

Indeed. Otherwise you can quickly lost track of your styling, create bloat load of extra classes, and the use case of !important becomes a norm.. xdd

Collapse
 
jack_garrus profile image
Nadia Guarracino

As a CSS lover (I know, it's a blasphemy) the only thing that confuses me in these days is what is the best for a React app between Styled Components and CSS modules(which I love) and why CSS modules are widely ignored in favour of Styled Components.

For the rest, I feel your friend there: I had this conversation to my friends developers who decided to not be a full-stack anymore specially for this css nightmare :p

Collapse
 
madza profile image
Madza

You meant my ex-friend? xdd

Collapse
 
jack_garrus profile image
Nadia Guarracino

Well, that excalated quickly

Thread Thread
 
madza profile image
Madza • Edited

He changed number shortly after, i guess xdd

Thread Thread
 
jack_garrus profile image
Nadia Guarracino

I thought you were kidding!

Collapse
 
jwp profile image
John Peters • Edited

I love this article @madarsbiss . It exactly tells the story of confusion regarding CSS. CSS is a simple concept but the layout implementation in the browser forces us to learn how browsers use it. When we start combining and cascading things, we are easily able to spend a day or two trying to figure out something simple like I don't want that space, I don't want it there, I want row layout instead of column layout. This is why 3rd party solutions are everywhere. Everybody has an opinion.

As you mentioned, might as well carve out a week just to do simple refactoring and it's all done manually. There are some interesting ways to convert this psuedo language into a real one for sure. The more I use CSS the more I want it to act just like JavaScript or even better Typescript.

So until that day comes, (and I'm working on the ideas of that solution every day) I have thrown out all frameworks and use HTML Grid for all layout. With Angular's view encapsulation, I style for each view only. The global CSS is for global only styles. This at least cuts the debug problem down to the minimum. The Grid solves almost all layout issues.

Collapse
 
madza profile image
Madza

Gone through myself, so I just wanted to express the feeling xdd

Collapse
 
ekafyi profile image
Eka • Edited

Most of the criticism in this article refers to the plethora of API/specs, libraries, and methodologies. Definitely it is confusing and frustrating at times with the choices overload and ever-changing trends. Same can be said about any part of web development thoughā€”this fragmentation characterizes the web dev world in general. Heck, how many ways do we have to define a function in JS? To render a page (server side, client side, SSG some of the content and client-render the rest)?

CSS tools' increasing complexity also grows from JS tools' increasing complexity (eg. CSS-in-JS like Styled Components would not gain so much traction if not bcs of React's component-based UI approach).

I don't mind any of those getting called out. What I do object is when people (speaking generally, not necessarily the OP) use this to diss CSS as a whole. Just acknowledge it's a skillset on its own--some are good at / keen on it, some others are not--not some "easy" throwaway skillset that every coder can do.

Anyway, personally I have better peace of mind when not trying to catch up with all the latest tools (both CSS and JS). For many cases, writing plain CSS + CSS variables is enough for me. šŸ¤·šŸ½ā€ā™€ļø

Collapse
 
madza profile image
Madza • Edited

When it comes to styling, we have never invented anything new, we have just optimized existing methods to achieve more specific tasks. They are all just styles after all.

Collapse
 
iamschulz profile image
Daniel Schulz

Honestly, this is how I think about JavaScript. It seems impossible to create a small website without tooling that's twice as complicated.

Collapse
 
madza profile image
Madza

Haha, JS has been like that for a quite some time :)
CSS has cached up, that's for sure xdd

Collapse
 
jankosutnik profile image
Jan Kosutnik • Edited

This is so true.
When you want to create a simple website, without the unnecessary luggage, but then you get lost in all of the abovešŸ™ˆ.

Collapse
 
madza profile image
Madza

"Jack of all trades, master of none" comes to mind xdd

Collapse
 
jotarv profile image
JosƩ Manuel Romero

Thank you so much for this article! Funny and educational at the same time, also helped to clear my mind from the myriad of options, tooling, conventions (and lack thereof) that exists today.

Collapse
 
madza profile image
Madza

That was exactly my initial purpose on creating this piece! So happy you found it useful!

Collapse
 
hamo225 profile image
Tarek Hamaoui

This should be a Seinfeld episode šŸ¤£. Great summary tbh.

Collapse
 
madza profile image
Madza • Edited

Hahah, yeah xdd Lately I was a bit tired of reading CSS this and CSS that everywhere, so I decided to put it all together, to reveal the bigger picture :)

Collapse
 
hamo225 profile image
Tarek Hamaoui

Honestly as everyone is saying. Totally right. This is the general feel nowadays, there is always to much around. Thank you for this.

Thread Thread
 
madza profile image
Madza

Thank you for reading. You're welcome! :)

Collapse
 
louislow profile image
Louis Low

I belong to the frontend clan for web development. I seldom write CSS since I fully depending on Yogurt for styling UI. Vanilla.js, Vue.js, and Alpine.js are favorite tools. I create web components with API callbacks which make my frontend development much easier. But skipping the CSS is more like Zen.

Collapse
 
florenciatrigo profile image
FlorenciaTrigo

I found this article summerize what I think is happening with design. 2020.

vanschneider.com/the-kawaiization-...

Collapse
 
madza profile image
Madza

Thanks for sharing, just gave it a read :)
Also some clean designs there <3

Collapse
 
thijs0x57 profile image
thijs0x57

Funny and interesting article! I can now read info about some new CSS ways

Collapse
 
madza profile image
Madza

Thanks! Glad you liked it :)