6 ms·

I work as a frontend architect and UX lead (yes, it's tiring), and you're encountering a common problem. Javascript is logical (sort of...), and a lot like lea

I work as a frontend architect and UX lead (yes, it's tiring), and you're encountering a common problem. Javascript is logical (sort of...), and a lot like learning math. It's fairly easy to validate your output. It works well with the logical side of your brain. Learning CSS is a lot like learning English. There's the basic grammar, but also tons of edge cases, dialects, and straight up absurd rules (Buffalo buffalo..). It's a language primarily improved through experience and memory. CSS has undergone LOT of development last few years, so things like div centering can now be solving by margin (oldest), flex (newer), and grid (newest), but only in certain browser. It's a language you must constantly keep up with. Design is just colors and fonts right? (At least, that's what my CEO says). It's important to realize that good design is as hard as good code, and you really benefit from a similar education. That being said, cheat by using a color wheel or Coolors.co Fonts all look the same until you learn how to look at them. Wine all tasted the same to me until someone taught me what to look for. Without knowledge about why fonts are a certain way you'll never be able to pick one, but it's totally possible to pick that knowledge up. Find a beginner book on fonts and you'll be on your way in no time.

mattmanser 8y ago
A layout engine and design are two entirely different concepts. CSS has nothing to do with design. It is the tool used to implement the design and there are loads of other layout tools out there that don't have CSS's infuriating quirks. On the flip side, they usually have steep learning curves because they are strict. For a long time, until less than a decade ago, designers knew nothing about CSS. They'd do a design in pictures and their design would be implemented by a programmer. Some (unlucky) programmers entire job was turning PSDs into HTML and CSS.
- perilunar 8y ago
  > Some (unlucky) programmers entire job was turning PSDs into HTML and CSS. That was my entry into programming many years ago. But I wouldn't call it unlucky - early web devs like me (we didn't really call ourselves programmers back then) had front-row seats at the beginning of a revolution, and it certainly was entertaining to watch and be part of. > CSS has nothing to do with design CSS works the way it does because it was created to make the kind of designs that designers wanted possible. It has everything to do with graphic design. All the web designers I knew back in the early days knew some HTML and CSS and we'd often discuss possibilities and limitations of browsers and standards, and how to work around issues. They didn't just lob PSDs over the partition to the devs - there was an active dialogue and they knew their stuff.
  - int_19h 8y ago
    > CSS works the way it does because it was created to make the kind of designs that designers wanted possible Well, not originally. Later that became a thing, yes - but all the design that was already there at that point (circa CSS 2) remained, as did the overall approach with cascading styles. A styling language designed for HTML5 today from scratch, accommodating modern use cases, would likely look a lot different.
    - perilunar 8y ago
      It would probably be written in JS, maybe something like JSSS [1]. I remember playing with it when it came out and thinking it was very cool. Pity it never went anywhere. If we were going to start from scratch though, we wouldn't do HTML5, we'd use some other format. JSON maybe? 1. https://en.wikipedia.org/wiki/JavaScript_Style_Sheets https://en.wikipedia.org/wiki/JavaScript_Style_Sheets
      - jacobush 8y ago
        Display PostScript? Only kidding, maybe.
      - mattmanser 8y ago
        Extremely doubtful, given that many of the modern ones have been written in XML (e.g. xaml, android) and iOS went old skool with a drag/drop GUI. No-one went pure code (because it's a massive PITA).
    - e12e 8y ago
      ^this I think the best illustration of this "fight" between CSS as a tool for styling "traditional" hypertekst documents, vs CSS as a tool for styling "web pages" is the fate of Adobe's CSS regions proposal - and Håkon Lie's opinion piece arguing against it: https://alistapart.com/blog/post/css-regions-considered-harmful https://alistapart.com/blog/post/css-regions-considered-harm... That was when "design" lost. But now with grid and transitions, there's a "new" CSS - one that is oriented around UX for "web apps". But apps evolved from documents, mind - not from windowing toolkits like smalltalk morphs or Java swing etc. Fwiw I really liked the idea of regions for laying out rich documents - like what you might want for epub. I must admit I'm not that concerned about "web apps" - everyone seems to end up doing their o we n abstraction anyway, and the CSS that "falls out" isn't really sane anyway.
- potta_coffee 8y ago
  I remember slicing designs in Photoshop into sections, to be dropped into pages...gross.
- madeofpalk 8y ago
  > CSS has nothing to do with design. What a bizarre statement. That's like saying words have nothing to do with stories, or paint has nothing to do with art.
jrochkind1 8y ago
I think there's edge cases, dialects, and straight-up absurd rules in JS too. I don't think CSS is any less logical... but some might not be use to _declarative_ languages like CSS is?
- leppr 8y ago
  The difference is that with JavaScript, you can install a linter and happily restrict yourself to the sane subset of the language. It's very realistic to never have to deal with any of the uglier parts of JS, even as a full-time front-end developer. With CSS, you can't avoid hacks. If you try to design anything non-trivial, you will have to employ tricky non-semantic tricks, run into edge cases, and have to settle on ugly, non-optimal solutions. I don't think it's a declarative vs imperative thing. It's more that CSS was designed to be easy to use and relatively terse for a specific, outdated use case (20+ years ago when a website page was thought as a 1 dimensional flow of text and pictures). Nowadays our requirements encompass pretty much the full spectrum of 2D space design, yet we still use a language that builds on high level primitives designed for a narrow usecase. New features like Flexbox and CSS Grid help with the layout part, but it's not enough.
  - BigJono 8y ago
    What does installing a linter have to do with using a subset of a language? Just... use the constructs you're familiar with? It's not like you can "accidentally" use an ES6 class or something.
    - yakshaving_jgt 8y ago
      You can accidentally use == instead of ===, or even accidentally use the assignment operator instead of one of the comparison operators. You can know about for..in without knowing about hasOwnProp. You can forget to enable strict mode. The list goes on. Static analysis is universally a good thing.
      - deleted 8y ago
        [deleted]
deleted 8y ago
[deleted]
unclebucknasty 8y ago
>tons of edge cases, dialects, and straight up absurd rules (Buffalo buffalo..). It's a language primarily improved through experience and memory. Yeah, I'd sum it up by saying CSS makes hard things barely possible and simple things hard. The example OP gave of centering divs illustrates this point, and there are unnecessary weaknesses in laying out a page when, for example, sizes aren't known in advance. Overall, there's a divide between intuitive expression and output, wherein the browser ends up saying things like, "I won't do this (e.g. center) unless you also do that (e.g. tell me how big it is)." Really? Why? In all, it's never been an efficient solution to the problem it seeks to solve. When the Great War on Table-based Layouts broke out, it was even less suitable, which made it even more painful that you were persona non grata for resisting. So, rather than demand a better standard and uniform browser support, we just hacked and kludged and shimmed around it. So, the need to support the legacy has made it even more impractical to fix, hence the attempted do-over with flexbox. CSS has been the bane of front-end development for many a dev. Amazing that we largely just suffer through it, and its tyranny has reigned for so long.
johnsonjo 8y ago
If anyone doesn’t get the “Buffalo buffalo...” reference here’s the Wikipedia about that bizarre English sentence [1]. [1]: https://en.m.wikipedia.org/wiki/Buffalo_buffalo_Buffalo_buffalo_buffalo_buffalo_Buffalo_buffalo https://en.m.wikipedia.org/wiki/Buffalo_buffalo_Buffalo_buff...
- NeedMoreTea 8y ago
  Oh wow. I'd always just assumed it was a US idiom along the lines of yada yada or something. Buffalo buffalo... doesn't work in British English as it is only a noun. Nearest English silliness I can remember hearing is: police police police police.
  - jacobush 8y ago
    Don't tell me you can't verb a noun in English English? "police police police police" - please...
    - NeedMoreTea 8y ago
      Of course nouns have been made verbs in English. You'll find no British English dictionary listing where buffalo is, unless noting US usage, where it is both. Police police police police is grammatically correct, but of little meaning : (the) police police(v) police (of) police (ie overseers of the police).
      - ckw 8y ago
        I read it as: police police (Internal Affairs) police(v) police.
    - pluma 8y ago
      FWIW I'm an ESL speaker from a non-English speaking country and despite having had endless exposure to (mostly American and British) English since a young age, I've never encountered the verb form of "buffalo" outside that one sentence. It's an informal North American idiom and by international standards apparently a fairly obscure one. Policing OTOH seems to be a fairly widespread verb form with a clearly understood meaning (i.e. what the police conceptually is supposed to be doing). Unless you have close experience with buffalo, you probably can't infer buffaloing means "intimidating". EDIT: Also as mentioned elsewhere, not everyone outside the US knows there are places actually called Buffalo or makes that leap when hearing the word "buffalo". So "Buffalo buffalo" is more likely to be read as "buffalo(n) buffalo(v)" (which already sounds weird if you don't already know what "to buffalo sb" means) which breaks down as soon as you add more buffalo to the sentence.
IfOnlyYouKnew 8y ago
Everything you say rings true ca 2000 to 2012. Today, CSS and the rendering engines have both improved and converged to such a degree, I’m not sure it’s fair to still criticize them quite so harshly. Of course the cutting edge will temporarily see one rendering engine a few months behind another. But that’s unavoidable unless you prefer a monoculture, which is liable to move slower than slowest of today’s major rendering engines. It’s perfectly normal today to create CSS (and JS) in one browser and find it working flawlessly in another. 10 years ago, you would have called everyone over to your screen to have them witness this miracle.
LandR 8y ago
> Javascript is logical (sort of...), and a lot like learning math. It's fairly easy to validate your output. It works well with the logical side of your brain. No, it really isn't. Some languages are, JS definitely isn't. It's mostly illogical / broken / mental.
- pluma 8y ago
  That isn't an argument, you're just expressing your disagreement. Even if it were an argument I'm not even sure it would be an argument worth having because it's likely entirely orthogonal given the context of the original statement (i.e. contrasting JS with CSS and HTML -- where whatever esoteric programming language you're thinking of is not an option to begin with).
- beaconstudios 8y ago
  if you avoid the absurd parts, JS is perfectly acceptable. The standard ways people write modern ES6+ CSS is fine.
yuchi 8y ago
I’m in the same exact role, leading both UX and FE engs. It’s exhausting.

mattmanser 8y ago

A layout engine and design are two entirely different concepts. CSS has nothing to do with design. It is the tool used to implement the design and there are loads of other layout tools out there that don't have CSS's infuriating quirks. On the flip side, they usually have steep learning curves because they are strict. For a long time, until less than a decade ago, designers knew nothing about CSS. They'd do a design in pictures and their design would be implemented by a programmer. Some (unlucky) programmers entire job was turning PSDs into HTML and CSS.

perilunar 8y ago
> Some (unlucky) programmers entire job was turning PSDs into HTML and CSS. That was my entry into programming many years ago. But I wouldn't call it unlucky - early web devs like me (we didn't really call ourselves programmers back then) had front-row seats at the beginning of a revolution, and it certainly was entertaining to watch and be part of. > CSS has nothing to do with design CSS works the way it does because it was created to make the kind of designs that designers wanted possible. It has everything to do with graphic design. All the web designers I knew back in the early days knew some HTML and CSS and we'd often discuss possibilities and limitations of browsers and standards, and how to work around issues. They didn't just lob PSDs over the partition to the devs - there was an active dialogue and they knew their stuff.
- int_19h 8y ago
  > CSS works the way it does because it was created to make the kind of designs that designers wanted possible Well, not originally. Later that became a thing, yes - but all the design that was already there at that point (circa CSS 2) remained, as did the overall approach with cascading styles. A styling language designed for HTML5 today from scratch, accommodating modern use cases, would likely look a lot different.
  - perilunar 8y ago
    It would probably be written in JS, maybe something like JSSS [1]. I remember playing with it when it came out and thinking it was very cool. Pity it never went anywhere. If we were going to start from scratch though, we wouldn't do HTML5, we'd use some other format. JSON maybe? 1. https://en.wikipedia.org/wiki/JavaScript_Style_Sheets https://en.wikipedia.org/wiki/JavaScript_Style_Sheets
    - jacobush 8y ago
      Display PostScript? Only kidding, maybe.
    - mattmanser 8y ago
      Extremely doubtful, given that many of the modern ones have been written in XML (e.g. xaml, android) and iOS went old skool with a drag/drop GUI. No-one went pure code (because it's a massive PITA).
  - e12e 8y ago
    ^this I think the best illustration of this "fight" between CSS as a tool for styling "traditional" hypertekst documents, vs CSS as a tool for styling "web pages" is the fate of Adobe's CSS regions proposal - and Håkon Lie's opinion piece arguing against it: https://alistapart.com/blog/post/css-regions-considered-harmful https://alistapart.com/blog/post/css-regions-considered-harm... That was when "design" lost. But now with grid and transitions, there's a "new" CSS - one that is oriented around UX for "web apps". But apps evolved from documents, mind - not from windowing toolkits like smalltalk morphs or Java swing etc. Fwiw I really liked the idea of regions for laying out rich documents - like what you might want for epub. I must admit I'm not that concerned about "web apps" - everyone seems to end up doing their o we n abstraction anyway, and the CSS that "falls out" isn't really sane anyway.
potta_coffee 8y ago
I remember slicing designs in Photoshop into sections, to be dropped into pages...gross.
madeofpalk 8y ago
> CSS has nothing to do with design. What a bizarre statement. That's like saying words have nothing to do with stories, or paint has nothing to do with art.

jrochkind1 8y ago

I think there's edge cases, dialects, and straight-up absurd rules in JS too. I don't think CSS is any less logical... but some might not be use to _declarative_ languages like CSS is?

leppr 8y ago
The difference is that with JavaScript, you can install a linter and happily restrict yourself to the sane subset of the language. It's very realistic to never have to deal with any of the uglier parts of JS, even as a full-time front-end developer. With CSS, you can't avoid hacks. If you try to design anything non-trivial, you will have to employ tricky non-semantic tricks, run into edge cases, and have to settle on ugly, non-optimal solutions. I don't think it's a declarative vs imperative thing. It's more that CSS was designed to be easy to use and relatively terse for a specific, outdated use case (20+ years ago when a website page was thought as a 1 dimensional flow of text and pictures). Nowadays our requirements encompass pretty much the full spectrum of 2D space design, yet we still use a language that builds on high level primitives designed for a narrow usecase. New features like Flexbox and CSS Grid help with the layout part, but it's not enough.
- BigJono 8y ago
  What does installing a linter have to do with using a subset of a language? Just... use the constructs you're familiar with? It's not like you can "accidentally" use an ES6 class or something.
  - yakshaving_jgt 8y ago
    You can accidentally use == instead of ===, or even accidentally use the assignment operator instead of one of the comparison operators. You can know about for..in without knowing about hasOwnProp. You can forget to enable strict mode. The list goes on. Static analysis is universally a good thing.
    - deleted 8y ago
      [deleted]

deleted 8y ago

[deleted]

unclebucknasty 8y ago

>tons of edge cases, dialects, and straight up absurd rules (Buffalo buffalo..). It's a language primarily improved through experience and memory. Yeah, I'd sum it up by saying CSS makes hard things barely possible and simple things hard. The example OP gave of centering divs illustrates this point, and there are unnecessary weaknesses in laying out a page when, for example, sizes aren't known in advance. Overall, there's a divide between intuitive expression and output, wherein the browser ends up saying things like, "I won't do this (e.g. center) unless you also do that (e.g. tell me how big it is)." Really? Why? In all, it's never been an efficient solution to the problem it seeks to solve. When the Great War on Table-based Layouts broke out, it was even less suitable, which made it even more painful that you were persona non grata for resisting. So, rather than demand a better standard and uniform browser support, we just hacked and kludged and shimmed around it. So, the need to support the legacy has made it even more impractical to fix, hence the attempted do-over with flexbox. CSS has been the bane of front-end development for many a dev. Amazing that we largely just suffer through it, and its tyranny has reigned for so long.

johnsonjo 8y ago

If anyone doesn’t get the “Buffalo buffalo...” reference here’s the Wikipedia about that bizarre English sentence [1]. [1]: https://en.m.wikipedia.org/wiki/Buffalo_buffalo_Buffalo_buffalo_buffalo_buffalo_Buffalo_buffalo https://en.m.wikipedia.org/wiki/Buffalo_buffalo_Buffalo_buff...

NeedMoreTea 8y ago
Oh wow. I'd always just assumed it was a US idiom along the lines of yada yada or something. Buffalo buffalo... doesn't work in British English as it is only a noun. Nearest English silliness I can remember hearing is: police police police police.
- jacobush 8y ago
  Don't tell me you can't verb a noun in English English? "police police police police" - please...
  - NeedMoreTea 8y ago
    Of course nouns have been made verbs in English. You'll find no British English dictionary listing where buffalo is, unless noting US usage, where it is both. Police police police police is grammatically correct, but of little meaning : (the) police police(v) police (of) police (ie overseers of the police).
    - ckw 8y ago
      I read it as: police police (Internal Affairs) police(v) police.
  - pluma 8y ago
    FWIW I'm an ESL speaker from a non-English speaking country and despite having had endless exposure to (mostly American and British) English since a young age, I've never encountered the verb form of "buffalo" outside that one sentence. It's an informal North American idiom and by international standards apparently a fairly obscure one. Policing OTOH seems to be a fairly widespread verb form with a clearly understood meaning (i.e. what the police conceptually is supposed to be doing). Unless you have close experience with buffalo, you probably can't infer buffaloing means "intimidating". EDIT: Also as mentioned elsewhere, not everyone outside the US knows there are places actually called Buffalo or makes that leap when hearing the word "buffalo". So "Buffalo buffalo" is more likely to be read as "buffalo(n) buffalo(v)" (which already sounds weird if you don't already know what "to buffalo sb" means) which breaks down as soon as you add more buffalo to the sentence.

IfOnlyYouKnew 8y ago

Everything you say rings true ca 2000 to 2012. Today, CSS and the rendering engines have both improved and converged to such a degree, I’m not sure it’s fair to still criticize them quite so harshly. Of course the cutting edge will temporarily see one rendering engine a few months behind another. But that’s unavoidable unless you prefer a monoculture, which is liable to move slower than slowest of today’s major rendering engines. It’s perfectly normal today to create CSS (and JS) in one browser and find it working flawlessly in another. 10 years ago, you would have called everyone over to your screen to have them witness this miracle.

LandR 8y ago

> Javascript is logical (sort of...), and a lot like learning math. It's fairly easy to validate your output. It works well with the logical side of your brain. No, it really isn't. Some languages are, JS definitely isn't. It's mostly illogical / broken / mental.

pluma 8y ago
That isn't an argument, you're just expressing your disagreement. Even if it were an argument I'm not even sure it would be an argument worth having because it's likely entirely orthogonal given the context of the original statement (i.e. contrasting JS with CSS and HTML -- where whatever esoteric programming language you're thinking of is not an option to begin with).
beaconstudios 8y ago
if you avoid the absurd parts, JS is perfectly acceptable. The standard ways people write modern ES6+ CSS is fine.

yuchi 8y ago

I’m in the same exact role, leading both UX and FE engs. It’s exhausting.