I front-end and hate CSS. Here's how I deal with it

But I like CSS! 😆

I never write CSS for any UI development. I use Vue.js or Krugurt.js with Yogurt.

I can create beautiful web component in a just few minutes with API callbacks, for example:

<card-post>
  <y class="m-4 p-2 bg-white rounded-lg shadow">
    <y class="{ props.titlesize } font-semibold text-charcoal-100">
      { props.title }
    </y>
    <y class="{ props.descsize } depth-snug truncate">
      { props.description }
    </y>
  </y>
</card-post>

And then mount the web component:

<card-post
  title="..."
  description="..."
  titlesize="text-lg"
  descsize="text-sm">
</card-post>

Absolutely zero CSS.

I wanted to chime in just to say you're taking feedback like a champ! Glad to see people that are brave enough to share a snippet and then be open minded to what others have to say about it. Cheers!

In my experience, Zeplin is pretty poor as far as it comes to CSS. Modern UIs should be designed relative to font size the user has selected for his or her browser and as a result, your front end should be sized using raw em and rem everywhere. Zeplin doesn't support that as far as I know.

Try to create semantic markup first and use CSS (and maybe JS) to tweak the UI if really needed. Once you understand CSS well (and hopefully don't need to support MSIE or older Safari releases) it seems pretty clear that the V in MVC is CSS in web development.

Yeah, CSS is pretty huge spec. And the compability between older browsers hasn't been that good. But in the end, CSS is the best we have for any environment.

Thank you for the feedback Dan!

you are bringing back html/css mess that we have left behind.
I completely agree with you. This is a mess :)

MainDiv2Wrapper is not a component. Article or Comment or Badge etc are components.
Actually I think my concept of naming conventions of component was not up to par. The examples you gave me are of great help and I believe I will be using similar naming conventions when I fix the code.

Thank you for taking the time to point this out. I greatly appreciate it :)

I feel your pain. I agree with most of the feedback below but I can't believe no one has recommended you take a look at TailwindCSS yet. It has helped me immensely as I've transitioned from backend to frontend. It is a somewhat different approach to CSS but it's a really nice experience once you dive in. It lends well to rapid prototyping but has the flexibility to mesh with any type of design system or style guide.

The exact same spot in which I find myself. Backend Dev at heart being put into a Full Stack role. We'll find our way though, I just believe in putting in the work.

By the way, hearing alot about Tailwind recently. Is there a React implementation and is it better than Material-ui?

I used to hate css until I took some time to learn it. SCSS helped. Just pouring "hate" on things you don't understand or haven't learned yet -is going to be a problematic standpoint to take on things in life

This fails to include the hordes of styled components that you have to include in your component's file that radically lower readability, especially with hooks.

Oh boy, I don't like the look of this. You should try Tailwind CSS.

I prefer the second one too.

There are allot of new css-in-js libraries each with there own syntacts, that for instance make certain things, like animations, structuring react apos and theming (especially for light-dark mode) easier.Without knowing css really well you won't be able to pick up the new better ones. Great css-in-js souloutions that I at least know: emotionjs, theme-ui (from the creators of gatsbyjs - my fav), glamorous, and of course styled components.

How long have you been 'front ending'? CSS is your biggest friend is you want scalable, semantic code. This example actually made me think the inverse of what you were trying to argue, but thank you for helping me out it into words - this code might be great for a single freelance developer in limited cases, but so semantically messy and bloated that any team member would just label this as spaghetti and wouldn't even bother refactoring it.

I would suggest investing in reading up on pug / scss (mixins + variables in your build) with your react (or vanilla, or vue, or whatever.js) - have it output your SCSS or LESS into CSS for you (use prettier at runtime if you need to, with most compilers), then you can dig in later.

Also worth checking out: BEM, prettier, and other CSS naming / cleaning tools.

Whew! Where do I begin!?

I've read a lot of comments on this, both positive and negative. The problem here is NOT your inability to write CSS (you still write CSS with Styled Components), it's that you want to see the structure (and styling) of the page once you look at the file.

But like everyone has pointed out, you're going about this in a wrong way. I'll like to suggest a much better way to deal with your CSS hate, Utility-first CSS. Checkout tailwind css

The benefit of this is that, you immediately get a sense of the style of your page without opening the CSS file. You can use this with SC (I'm doing exactly this right now).

It'll take you just a few hours to get used to this I promise.