[HN Gopher] The Importance of Learning CSS
___________________________________________________________________
The Importance of Learning CSS
Author : feross
Score : 67 points
Date : 2021-03-04 18:27 UTC (4 hours ago)
(HTM) web link (www.joshwcomeau.com)
(TXT) w3m dump (www.joshwcomeau.com)
| hshshs2 wrote:
| One important tip that I've found useful with CSS: read the whole
| MDN page when you're looking up how to do something. I feel like
| my knowledge has increased dramatically just by doing that and
| it's only a minor diversion.
| knivets wrote:
| > As JavaScript developers, the sheer amount of stuff we're
| expected to know is enormous, and it grows bigger every day.
|
| A question to ponder over: expected by whom?
| whytaka wrote:
| As a designer that used to make pixel perfect websites turned
| developer, CSS lets me offload so much of what I need in building
| UIs and keeps my templates/JSX as close to data representation as
| possible. With my components having tightly scoped CSS, the only
| CSS I share between my components is very universal branding
| settings. My class names make sense and my SCSS reads like the
| DOM, and the only non unique dom-selector class name is the
| 'active' state.
|
| I loathe having to deal with so much layout building classes in
| my dom, having to swap them for responsive layouts, etc. My css
| determines layouts. My html presents data. It keeps my javascript
| very focused on function.
| girzel wrote:
| In my attempts to be a "generally competent programmer", I've
| waffled about how much web-dev technology I should reasonably
| expect myself to know. I think where I've come down is: knowing
| CSS well -- and yes, that means a real understanding of grid and
| flexbox -- but forgiving myself from Javascript.
|
| Anyone who might conceivably hire me to do anything JS related is
| likely to want the whole shebang: lightboxes, horizontal
| scrolling, SPA-like stuff, and I'm never going to be conversant
| with that. It's enough to be really good at CSS, and to save the
| JS for when people don't really realize you're writing JS: some
| little vanilla ECMA6 bumps to site usability, and maybe some
| tasteful htmx. That's enough. Leave the rest to someone else.
| imbnwa wrote:
| Quite honestly, as a self-taught frontend dev with only 5 yrs
| experience, everything about frontend is backwards in terms of
| priority. There are people who've been doing frontend for 15
| years, so before the boom when it was a jQuery/Dojo/MooTools
| etc, who have no clue what a finite state machine is, never
| mind the implicit ubiquity in their business code. But asking
| about if people are familiar with React seems prioritous.
|
| Frontend is just stacked with this form of mistaken
| understanding, hence the bike-shedding over frameworks. We know
| we can represent a given app as a function signature, whose
| implementation would be comprimised of related, derived
| signatures, and a framework is just a bunch of implementation
| details between these in a sense. Details that may have
| profound significance for your project, but you'll be surprised
| how shallow the discussion resolves around those differences.
|
| This is why frontend is just piles of code on top of code, at
| least at operations I've seen, the JIRA ticket fest being
| another contributer, but there's so little _engineering_
| understanding being propagated by and large, people mistake
| these high-level concepts for software engineering proper.
|
| And somehow, the tech managers are usually the least in
| understanding, so they hire people who are like them and make
| them comfortable, and the process continues
| wwweston wrote:
| This may be a general problem with the stack/framework
| emphasis.
|
| If a framework is good, it should be friendly enough to
| people who've got essential coding/algo/data skills that the
| details of the framework can be picked up as you go,
| especially if they're familiar with other approaches in the
| same space.
|
| If utility with a framework demands two years of familiarity
| before employable productivity with it... maybe it's not a
| great framework.
| imbnwa wrote:
| Frameworks just dont give af cause framework authors are
| out here busy trying to monopolize ALL THE STARS (dev
| mindshare, basically).
|
| Just look at Hooks and React.
|
| How many posts have we seen where people demonstrate the
| authors could've done something different, without
| buggering with what the meaning of a call site in a React
| component is, or even accomodated hooks in the Class API,
| but React devs can get away with this cause they don't need
| to prove coherent technical benefits, they just need to
| make it look like "the next big thing".
|
| Numerous frameworks solve the problem of cross-cutting
| state concerns targeted at distinct sub-trees in the your
| UI (see mobx/freactal/etc).
|
| The componentDidMount/componentDidUpdate simplification is
| nice, but could've been accomodated in the Class API.
|
| Other reasons like "readability" or some shit, I honestly
| don't give af cause these are subjective statements that
| aren't at all neccesarily related to a solution's quality
| per project
| DiggyJohnson wrote:
| This is exactly my approach, and I'm glad to see it written out
| so well.
| Taylor_OD wrote:
| I just want to understand how to do pretty basic things with CSS.
| Like building hackernews in css even seems difficult. Anyone have
| suggestions?
| firefoxd wrote:
| I learned CSS twice.
|
| The first time was like everyone else does. Google tricks here
| and there. How to center div, how to create columns with divs,
| how to do rounded corners etc. This will only get you so far.
|
| The second time around, I took a bunch of courses online, lynda,
| one of by designers, and bought books. Once you understand the
| fundamentals of CSS, you can work just fine with css2. Css3 is
| just an added benefit and great for animation.
| aitanabewa wrote:
| I'm on my second time (: . Do you have links to the resources
| that you mention?
| cpmsmith wrote:
| This is only applicable if your brain is wired a certain way,
| but in case it is, I strongly agree with this note at the end
| of the article:
|
| > The CSS specifications are surprisingly user-friendly! I
| learned a ton reading the [Flexbox
| spec](https://www.w3.org/TR/css-flexbox-1/).
|
| The CSS specs are fairly intelligible (as specs go) and once
| you have enough base knowledge to get a foothold while
| reading them, they force you into thinking about CSS much
| more systematically, because that's how specs are written.
| eurasiantiger wrote:
| I'm in the same boat. "Learnt CSS" in the late 90's/early 00's,
| and learnt it all over again in the 010's.
|
| It's true, CSS2 is all you need to build any layout. I actually
| prefer float grids over flexbox and CSS grid. Float grids are
| so simple to use in comparison, and all it requires is a list
| of breakpoints and two to three SCSS mixins, depending on how
| fancy you wanna get.
|
| But no way I'd write it without modern tooling.
| sixQuarks wrote:
| Are you sure you know flexbox and grid well? I don't see how
| you could prefer floats.
| petepete wrote:
| Grid and flex let you do in five lines what used to take
| fifty. I'd never go back.
| wwweston wrote:
| Floats have their place. The conceptual model is simpler
| for some simple cases, and you can build layouts that
| reflow over different viewport sizes without worrying about
| breakpoints.
|
| Once you need equal-height boxes in your layout, though,
| it's time to use something else.
| Animats wrote:
| _" (Learning CSS) improves your quality of life"_
|
| If you have to create web pages by hand, it probably does.
|
| If you have to read CSS created by others, no.
|
| Unfortunately, when CSS was created, constraint solvers were rare
| and object inheritance was too popular.
| Nailgun wrote:
| I got into Javascript, the DOM, SVG, Canvas, WebGL but never CSS.
| I genuinely hate it with a passion. It is just one of those
| things that always annoy me and can't really explain why. I came
| from the Flash Runtime a long time ago where I used to easily
| control the display list. It might be that.
| heyparkerj wrote:
| I've always been rubbed weird by CSS for these reasons:
|
| 1. Often times, someone will do something that should be done
| programmatically with CSS instead, leading me to finally come
| to the realization of "holy shit the bug was hidden in the
| CSS!".
|
| 2. I've (very cattily) referred to CSS as Cascading Sideeffect
| Sheets. You can do things to mitigate it, but trying to wrap
| your head around an application's vanilla CSS declarations and
| which elements are effected by what is an enormous pain
| compared to what it could be. My team has switched to CSS
| Modules, and the scoping relieves sooo much of my aversion to
| it.
|
| 3. The final reason is that CSS proficiency just feels like
| memorizing a collection of "Gotchas" that don't make sense in
| isolation. It's not very programmatic, and lots rules aren't
| grouped or named in a way that you can understand what's going
| on by reading. For every CSS rule you need to understand for
| whatever reason, you're going to have to dive into some
| documentation to figure out exactly all of the
| effects/sideeffects it will have, and sometimes also have to
| grok their interactions with other rules.
| Nailgun wrote:
| I am totally feeling this!
|
| Especially your last point. I want to do something with B,
| but I break A and C somehow. Or I change A to fix B but all
| of A breaks down. I google it, and there is a menu of
| choices. On week 3 the first one worked, on week 6 it all
| breaks down, so I go back to A and C, but it breaks A again.
|
| I am really lazy with this.
|
| I feel like no one knows CSS properly, whereas for my
| previous listed technologies, you can learn it without the
| "shotgun" approach.
|
| I have always known I am missing something but never been
| able to put my hand on what that lightbulb is.
|
| Edit! Also due to the "menu" effect, when I do put my trust
| in someone, it doesn't actually apply. Like an OOP programmer
| using global constants everywhere! So what I learned was
| actually incorrect, but now I am polluted by garbage...
| racl101 wrote:
| When I was first starting out I thought I really needed to be a
| Jack-of-all-trades before I could be hireable and/or a practicing
| programmer.
|
| I tried to study a lot of technologies but found that I was
| spreading myself thing and doing nothing exceptionally well.
|
| Instead, it served me better to work on a few projects, see what
| I like, pick an area and to just get better and then learn the
| other things I need to as I go along.
|
| Nobody can be good at every technology. It's not like that in
| real life so why do we have expectations that it would be like
| this in software development? A kickass mechanic doesn't need to
| be also be a kickass plumber and a kickass carpenter. They can
| but that's not what we expect from them.
|
| I am now comfortable knowing more server side technologies and
| barely scratch the surface of modern CSS.
|
| My efforts are rewarded more handsomely knowing backend
| technologies and JavaScript.
|
| If I need to know CSS then I can believe in my efficacy that I
| can learn it if I have time and to spend on it, and not feel
| insecure about delegating front end work to people who do it
| better.
| Kagerjay wrote:
| As someone who is usually the go-to CSS guy in every project, my
| take on CSS is you can't really master it. There's just so many
| tricks associated with it and our brains aren't wired to remember
| all the little tips and tricks.
|
| That being said, good skills in CSS are really in deficit imo. If
| your starting a career in webdev, just being good at CSS is
| already a big added benefit to a team, especially as a junior
| dev.
|
| Also, one of the harder things to understand as a frontend
| developer is knowing the limitations of CSS. It doesn't do
| everything, and sometimes you have to know when a Javascript-
| based CSS approach is better. This opens up another can of worms
| since now you also have to be familiar with alot of lesser known
| Javascript APIs.
|
| Last note to make is getting good at CSS also requires a good
| chunk of math knowledge, especially for difficult design-based
| problems
| DaiPlusPlus wrote:
| I'm going to respectfully disagree with the "our brains aren't
| wired" part: the most important part of the spec is the chapter
| of the _visual formatting model_ which can be summarised as
| "each HTML element is a rectangular box" - that's it.
| Everything else builds on top of that. The whole "cascading
| styles" part isn't really that important, I find.
|
| It was difficult for me to internalise originally: I cut my
| teeth on HTML at the end of 1999 when browsers still rendered
| each element type differently and they weren't interchangeable.
| taphangum wrote:
| A big reason why many developers struggle with CSS is because
| they view it as an afterthought. And never truly learn the
| fundamentals.
|
| An article that talks about how to overcome this (and that many
| have found useful): https://planflow.dev/blog/how-to-get-better-
| at-css
| chrisweekly wrote:
| Josh WC is cool, but if you want to (re)learn modern CSS and how
| to leverage it properly, from first principles, take a close look
| at "Axiomatic CSS" as described and demonstrated by
|
| https://every-layout.dev --
|
| a profoundly compelling, persuasive, expert, pragmatic,
| accessible, maintainable approach to CSS. It's transformative.
| I've been doing webdev since the late 90's (ie, before CSS), and
| this is hands-down the best such resource I've ever encountered.
| The axioms and some key examples are free; paying $100 for the
| book and component generator and access to updates was beyond a
| bargain. No affiliation, just a happy customer.
| corytheboyd wrote:
| tailwindcss is such a godsend when it comes to styling. To anyone
| glancing at it thinking "this is trash it's just inline styles
| all over the place that encourages duplication" I implore you to
| actually read and think about the points raised here:
| https://adamwathan.me/css-utility-classes-and-separation-of-...
|
| tailwindcss effectively boils the dauntingly large control plane
| of every CSS feature down into "utility classes" that you then
| compose all styling from. So far, it has had a solution for every
| styling problem I have encountered, and in the cases it didn't,
| when I really thought about it I was trying to do something dumb
| anyway.
|
| I swear I am not affiliated with the project at all haha, I just
| felt such a relief after giving it an honest try on a project and
| I could very easily see how powerful it would be in many of my
| past projects had we access to it (and convinced the naysayers)
| wildrhythms wrote:
| lol I've seen many reactionary takes in my workplace from
| front-end engineers (or even on Hackernews) reacting to
| Tailwind as "this is just inline styles with extra steps!" ...
| no, "inline styles with extra steps" is what you're doing now
| with CSS: writing a hundred one-off ".container" classes and
| bundling that with a hundred other ".container" and ".wrapper"
| classes across a hundred different components in the app.
|
| Tailwind is revolutionary. It has completely changed the way I
| develop, and I will evangelize it at every opportunity. I've
| started migrating a major project to Tailwind, and for the
| first time I'm not horrified by having to deal with conflicting
| stylesheets, etc. Everything I need to know about how a
| component looks is kept in the component, where it should be,
| and the bundle size is smaller than ever because Tailwind can
| prune the styles down to exactly what I'm using. Tailwind is
| great, and shoutout to Adam Wathan's youtube channel- very
| helpful in learning how it works and convincing me to try it.
| smoldesu wrote:
| God that is an annoying website. I understand that your personal
| site should be a showcase for your Javascript skills, but I think
| adding audio cues to a blog is a step too far. The first time I
| visited this site, the sounds hadn't loaded in properly, and then
| it unleashed a buffer of ~20 bubble popping sound effects on my
| poor ears. Plus, the superfluous animation is tacky, and the
| centered text strikes me as an unbelievable waste of space.
|
| Sorry if that comes off as a bit rude (if it's any consolation, I
| liked your clay figure!), but I honestly prefer reading plain
| markdown on a white background.
| koverda wrote:
| Luckily seems that the site supports reader view for people
| with your type of preferences.
| lvass wrote:
| A lot of things including code snippets are missing on
| firefox' reader view.
| tshaddox wrote:
| On the other hand, I find his website to be among the most
| usable and enjoyable programming education blogs out there.
___________________________________________________________________
(page generated 2021-03-04 23:01 UTC)