Do people really struggle with CSS?

I thought it was just design and ideas but is it actual CSS y’all struggle with?

Not judging. Just asking to be sure

Putting the answer to the following question in your post will be really helpful to the rest of us, readers.

How many web development projects have you done and how long?

No lie.....

I do, and I am not a beginner. Shit is unintuitive as fuck. Yeah, one would think that is as simple as selecting something and just adding design to it. But no, there are all sorts of weird bullshit to consider when coding in it.

Floated something? Better add clearfixes and shit! It's not a lang standard! It's a community standard! Animations? Fucking weird. Text alignment? Fucking weird. Everything about this language is fucking weird and unintuitive.

Don't get me wrong. I will sass some shit up with a complete proper design architecture(BEM and all that shit). I know what I am doing. I just fucking hate it.

One of the hardest things I have to deal with in this field.

Its highly annoying. But then again, im not a front end dev, so it takes some time to refresh my memory and learn good practices when i do work with it.

I imagine its easier when you have experience with it, so you can avoid the pitfalls and know the solutions to common problems.

Try being colorblind with no design skills. Yeah if you give me a design i can probably implement it but id really love a drag n drop wditor where i can style separate elements and export css

@ganjaman try the app for Mac Called sketch. It can do that

@al-m no

Nuff said

I want to thank u - I started writing a response to this, and that made me start thinking WHY I have such a hard time with the whole css design process compared to a functional backend design process and I realized I’ve never actually tried sketching out what I want it to look like before tryna write!!! I think I will have less trouble in the future just by thinking before writing. Thanks ❤️

For me, main problem is you have to wait a few years to use new stuff as browsers catch up, but always fucking Microsoft browsers that cause problems. I don’t use pre-processors, i’m sure there usefulness will be extinct within a few years if not already.

Nowadays, I find it to be "breezier" with flex and grid.

Supporting 6 year old browsers is almost impossible. Making something that works on both firefox, edge and chromium is easy

CSS is difficult to learn and can be quite confusing, especially to beginners. It's large and messy, unintuitive, and there is no real way to write it cleanly at scale. And sometimes things will just refuse to work and you have no idea why. Often it ends up being a random missing rule (e.g. "pos: rel") on some ancestor element. Or some incorrectly scoped styling from other components. It might be logical, but debugging is nontrivial. So yes. CSS is hard.

Even though I'm quite good with it, I still often fight trying to get things to work correctly.

Yes, like hell. But then, I'm a backender and server engineer (+security) so it's not really my thing either.

Sufficiently advanced use of css is indistinguishable from magic.
A. C. Clark

@Charon92 just use vw/vh, at least those are consistent

CSS is the work of the devil.

What. Css is pure fun. I love it.

@ganjaman but the vw and vh inclides the scrollbarn space (for logical reasons) so it cannot be used for everything

Psuedo selectors are a pain (before and after) but if you use case grid or flex everything usually just works, but sometimes you get wired stuff with uncommon things like fontaweeome stuff. Animations can be hard some times too but nothing unbearable

@Root css can be written cleanly if you use a framworks and components like in Vue React and angular. The css belongs to the component and it's much easier.

@iamroot and/or preprocessors ahahah

@iamroot hmm I agree partially. In Angular its almost impossible to share sass variables for example for colors.

@Codex404 well I only use Vue so I was just listing other frameworks not sure exactly how they work in angular or react but in Vue you can have a .Vue commponent and have it scoped to that component and it's 1 file for everything in the component

@al-m job posts nowadays - Full stack frontend side-end backend developer with DevOps and RESTful APIs. Also required: ReactJS/AngularJS.

CSS will fit in there

@iamroot Yes and no.
You're really just assigning inline styles that way and using js to share common styles -- which is also difficult to do well.

Also, css frameworks do not make things easier. Perhaps for small projects, but once you scale... they can cause soo many issues.

@Root not sure if I agree, I primarily work with Vue which has a great way to manage components and styles for said components and it doesn't use inline styles. I also don't use case frameworks for the reasons you stated

@iamroot If it's not using online styles, how is it applying them to the dom?

@Root Here is how scoped css worked in vue https://vue-loader.vuejs.org/guide/... "When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by using PostCSS to transform the following:"

<style scoped>
.example {
color: red;
}
</style>

<div class="example">hi</div>

to

<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>

<div class="example" data-v-f3f3eg9>hi</div>

This makes it a lot easier to read the css and manage where everything goes

@Charon92 because fuck us. That's why

@iamroot That is awesome. I love it.