9 ms·

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

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.

undozen 12y ago
I think you are not alone.
taternuts 12y ago
> 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.
- nawitus 12y ago
  This is how everyone I know works like, myself included.
  - ArtDev 12y ago
    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.
    - goldenkey 12y ago
      It's the properties of CSS, and browser quirks that make CSS a pain. Not the ordering and markdown of files.
Kequc 12y ago
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.
benburton 12y ago
http://i.imgur.com/Q3cUg29.gif http://i.imgur.com/Q3cUg29.gif
- colordrops 12y ago
  First meme I've ever seen on hacker news. Please stop.
  - slowmotiony 12y ago
    Oh come on, it was funny.
  - andrewflnr 12y ago
    Personally, I'm okay with a few hacker memes on Hacker News.
drcode 12y ago
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. CSS will not let you do this, even with flexbox.
- deleted 12y ago
  [deleted]
- Lerc 12y ago
  Has anyone assembled a list of things such as this that CSS cannot do? FlexBox always felt like it was a direct response to a few specific cases rather than a generalized gain in flexibility.
  - DougWebb 12y ago
    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'.)
- girvo 12y ago
  GSS will though! http://gridstylesheets.org/ http://gridstylesheets.org/
  - drcode 12y ago
    Does GSS work with Reactjs? If so, I might give it a try.
    - mercer 12y ago
      If GSS doesn't touch the markup, I think it would.
notduncansmith 12y ago
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]. 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_shared 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/ http://docs.emmet.io/css-abbreviations/ [2] https://www.codeschool.com/ https://www.codeschool.com/ [2a] You might be specifically interested in https://www.codeschool.com/courses/css-cross-country https://www.codeschool.com/courses/css-cross-country [2b] I also have an affiliate link if you're feeling generous: http://mbsy.co/7djLz 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.
- underwater 12y 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.
reillyse 12y ago
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.
- mercer 12y ago
  In some cases I've just given up and decided to use javascript to control the position and size of elements...

undozen 12y ago

I think you are not alone.

taternuts 12y ago

> 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.

nawitus 12y ago
This is how everyone I know works like, myself included.
- ArtDev 12y ago
  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.
  - goldenkey 12y ago
    It's the properties of CSS, and browser quirks that make CSS a pain. Not the ordering and markdown of files.

Kequc 12y ago

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.

benburton 12y ago

http://i.imgur.com/Q3cUg29.gif http://i.imgur.com/Q3cUg29.gif

colordrops 12y ago
First meme I've ever seen on hacker news. Please stop.
- slowmotiony 12y ago
  Oh come on, it was funny.
- andrewflnr 12y ago
  Personally, I'm okay with a few hacker memes on Hacker News.

drcode 12y ago

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. CSS will not let you do this, even with flexbox.

deleted 12y ago
[deleted]
Lerc 12y ago
Has anyone assembled a list of things such as this that CSS cannot do? FlexBox always felt like it was a direct response to a few specific cases rather than a generalized gain in flexibility.
- DougWebb 12y ago
  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'.)
girvo 12y ago
GSS will though! http://gridstylesheets.org/ http://gridstylesheets.org/
- drcode 12y ago
  Does GSS work with Reactjs? If so, I might give it a try.
  - mercer 12y ago
    If GSS doesn't touch the markup, I think it would.

notduncansmith 12y ago

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]. 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_shared 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/ http://docs.emmet.io/css-abbreviations/ [2] https://www.codeschool.com/ https://www.codeschool.com/ [2a] You might be specifically interested in https://www.codeschool.com/courses/css-cross-country https://www.codeschool.com/courses/css-cross-country [2b] I also have an affiliate link if you're feeling generous: http://mbsy.co/7djLz 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.

underwater 12y 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.

reillyse 12y ago

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.

mercer 12y ago
In some cases I've just given up and decided to use javascript to control the position and size of elements...