I actually like CSS as it is now, and it's getting better (cough, flexbox). Am I the only one who finds CSS incredibly hard to master, though? I've been writing CSS for years and I still feel like a newbie sometimes, and feel like I'm just tinkering with random attributes until it looks right.
Suppose you want to create the largest possible square div inside the rectangle of another div. Any layout language that can't let me satisfy such a simple and obvious layout constraint is a travesty.
I'm pretty sure FlexBox solves the "Why the hell can't I center these things vertically relative to one another?!?" problem that CSS has had for a very long time. Unfortunately, that wasn't the only problem CSS has had. Now we have to wait for CSS Grids, which look awesome and all, but based on history (floats, positioning, inline-blocks, flexbox) I'm not getting my hopes up that Grids will finally make CSS layouts reasonably adequate. (I'm not even raising the bar to 'usable'.)
agreed. I've been coding for 20+ years now (shit I feel old), 15 or so years of them with HTML and friends and I still throw my hands up in the air every so often when trying to deal with something as simple as getting stuff to show in the right place on a web page. CSS really is hard to master.
Part of that could just be me. I don't really care how it works, I just figure out the smallest amount possible to get what I'm doing to work and leave it at that. Maybe it's the fact that there are many ways to do very similar things, e.g. I can access an element by id or class or another attribute and so I just really need to find one that works and move on to other more "important" parts of the app.
> I've been writing CSS for years and I still feel like a newbie sometimes, and feel like I'm just tinkering with random attributes until it looks right.
This is exactly how I work with CSS too. Not surprisingly, it's my least favorite aspect of web development.
Just like programming, a lot of time can be spent debugging. Also, just like programming, the more systematic your approach, the less time you will spend debugging.
The solution is to stay DRY by applying OOCSS/SMACSS/BEM concepts using Sass/Less.
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.
For example. I've just found out about flexbox where up until now I thought I'd finally mastered position relative/absolute and floats in order to get nearly everything that I want.
