I don't mean to be rude[0], but what do you find so difficult about it? The box model makes a lot of sense, and once you understand that you're most of the way there. I still Google for less-common syntax (e.g. adding a strikethrough style to text) from time to time, but most of it is internalized by now[1]. Code School[2] was great when I was first ramping up as a developer.
I do also have a great memory[4] for tiny, usually-trivial bits of data like: "no matter the z-index of an element, it cannot overlap an absolutely positioned element (with z-index greater than 0) unless it is also absolutely positioned". It doesn't feel like it's any different than remembering various bits of syntax or APIs, but maybe that's a more difficult thing for some people to remember than others - IANAN[3].
[0] I actually started writing this comment ~15 times before settling on an opening.
[1] It's mostly just abbreviations now: I don't think or speak (or type) "background-color", I just think "bgc<tab>". This is due to the fantastic Emmet plugin for Sublime: http://docs.emmet.io/css-abbreviations/
[2b] I also have an affiliate link if you're feeling generous: http://mbsy.co/7djLz
[3] I am not a neurologist
[4] Terrible short-term memory though - my wife constantly complains about how I can remember "all those coding things" but can't recall what she asked me to do <30 seconds ago.
The motivations behind CSS are good. And the implementation is OK for the most part. But the "usually-trivial bits of data" are examples of it's failings. Let's talk examples:
* You want to overlay a <div> to the bottom write of a container. You can use "position: absolute; bottom: 0; right: 0", but that puts it at the bottom of the page instead. You have to add "position: relative" to the container. Understanding why you'd need this property means understanding implementation details. Which defeats the purpose of being a declarative language.
* You want to float a <aside> to the right of an <article> another. Just add "float: right", to the <aside> right? Whoops, that doesn't work. You'll need to add "overflow: hidden" to the <article> as well. Why should the overflow mode (which really should affect a node's contents) affect the layout of a sibling?
* You have a <header> element which extends the width of a content column. You want it to stay fixed within the page so give it "position: fixed". Now all of a sudden it's forgotten how wide it should be and shrinks to the width of it's content.
* You have a second <header> element with "width: 100%". You make it fixed too. Instead of retaining it's original width -- or shrinking like the other header -- it extends from its original position on the x-axis off the side of the screen so that it's 100% of the width of the page.
Sure, you can learn all of these special rules, but that isn't really a productive use of your time. I work with React a lot, so the approach we use is to create generic layout components that can do all of this stuff in a consistent way.
I'm fascinated that some people here express having no trouble with CSS. I'm inclined to think it's either inexperience with more complex layout, and otherwise just a completely different approach to CSS.
Could you perhaps show some examples of websites that you have built (or send me a message privately if you're not comfortable with that)?
One explanation I can think of is that the more willing you are to stray from the 'separation of content from presentation' rule, the easier things are. Many of the CSS problems I run into would be much easier to solve if I could allow my markup to be informed by the styling, rather than the other way around.
Another possibility is that some of the people who 'like' CSS are also the ones designing the site. They might design with their CSS knowledge as a basis.
In contrast, many of us who struggle with CSS probably struggle more because 1) we try to keep the html 'pure', and 2) we are handed designs by others or don't let ourselves be constrained by our knowledge of CSS.
> "no matter the z-index of an element, it cannot overlap an absolutely positioned element (with z-index greater than 0) unless it is also absolutely positioned"
> my wife constantly complains about how I can remember "all those coding things" but can't recall what she asked me to do <30 seconds ago.
This happens to me all the time. I thought about maybe writing an app that records all the time and then will play you back the last 30 seconds when you press a button.
Probably too resource intensive to be usable though.
I do also have a great memory[4] for tiny, usually-trivial bits of data like: "no matter the z-index of an element, it cannot overlap an absolutely positioned element (with z-index greater than 0) unless it is also absolutely positioned". It doesn't feel like it's any different than remembering various bits of syntax or APIs, but maybe that's a more difficult thing for some people to remember than others - IANAN[3].
Give Code School a shot (go through the whole CSS Cross-Country course). You can get a 2-day free trial here: https://www.codeschool.com/hall_passes/213f3fedb6b9/claim_sh....
[0] I actually started writing this comment ~15 times before settling on an opening.
[1] It's mostly just abbreviations now: I don't think or speak (or type) "background-color", I just think "bgc<tab>". This is due to the fantastic Emmet plugin for Sublime: http://docs.emmet.io/css-abbreviations/
[2] https://www.codeschool.com/
[2a] You might be specifically interested in https://www.codeschool.com/courses/css-cross-country
[2b] I also have an affiliate link if you're feeling generous: http://mbsy.co/7djLz
[3] I am not a neurologist
[4] Terrible short-term memory though - my wife constantly complains about how I can remember "all those coding things" but can't recall what she asked me to do <30 seconds ago.