[HN Gopher] What do I need to read to be a CSS dev?
___________________________________________________________________
What do I need to read to be a CSS dev?
Author : RageoftheRobots
Score : 169 points
Date : 2021-10-23 13:21 UTC (9 hours ago)
(HTM) web link (www.baldurbjarnason.com)
(TXT) w3m dump (www.baldurbjarnason.com)
| nathias wrote:
| If you want to make CSS make sense read about its history, it
| isn't sensless its just layers on layers of really old tech used
| for someting completely different than what it was designed for.
| CSS was made for typewriters and because the first web were just
| text on a page it was used for that, then a long dark age began
| which was finally vanquished by the light of flexbox.
|
| Cameau has good stuff https://css-for-js.dev/ and for random
| snippets css tricks.
| bigbassroller wrote:
| Just build websites!
| e12e wrote:
| I don't see A List Apart mentioned - it has a lot of great
| content, but has perhaps become less relevant as CSS has
| stabelized quite a bit. But articles like:
|
| https://alistapart.com/article/braces-to-pixels/
|
| still help get a good overview of how CSS work - and might be
| good in addition to more pragmatic guides on how to use tailwind
| etc.
| [deleted]
| NHQ wrote:
| CSS is easy to understand, simple to use, and impossible to
| debug.
| frankzander wrote:
| No?! It can be debugged but experience is needed.
| Forge36 wrote:
| It's a pain to debug. Live editing in chrome made it a 10
| minute training task for me last week.
| srcmap wrote:
| Get familiar with firefox / chrome debugger. That is very
| helpful for me to debug a lot of css issues.
| newsbinator wrote:
| Even with years of experience, probably the fastest way to
| debug tricky CSS is to disable all even close-to-applicable
| rules, and re-enable piece by piece until you find the culprit.
| throwaway158497 wrote:
| My rant about CSS. There is nothing like "compiler error
| messages" for CSS. The best we have is "inspect" in browsers. It
| shows the final state of browser has done, not the intermediate
| "why" or "how" part of it. For example, we will know that an
| image overflows a div, but browser won't tell why.
| gfxgirl wrote:
| because there is no error. there is no way for the browser to
| know that the css you wrote is not the css you wanted.
| tiborsaas wrote:
| The browser does know if there's an error. The devtools will
| tell you if a property is invalid.
| nness wrote:
| Firefox's developer tools shows a warning against CSS
| properties that will not function as intended (i.e. flex
| properties on a non-flex container). It can be quite helpful
| for debugging unexpected behaviour.
| jostylr wrote:
| In Firefox (not sure about the others), they do give some info
| on some errors, such as what might be overriding a rule (other
| rules or not an appropriate display type or something) or some
| invalid property or value. Not perfect, but it is not all in
| the dark.
|
| And the ability to directly manipulate the CSS and see the
| impacts can make getting the right visuals fairly quick, not to
| mention the ability to change the view size and directly
| interact with that in all the different screen sizes.
| deergomoo wrote:
| I have the same complaint, but I also don't know how such a
| thing would be addressed. Ideally I would like to right-click a
| computed style value in the devtools and be able to hit a "But
| Why?" option, but I feel like even linking to the relevant part
| of the relevant spec would be a monumental engineering effort.
| Forge36 wrote:
| "It depends"
|
| What areas are you spending your time?
|
| Are you making complicated layouts? How much of your layout is JS
| based? Personally learning more about @media selectors turned out
| to be a big win.
|
| Do you have a mentor? It's one thing to know the entire CSS
| catalog and another to know how to use it.
|
| What does your project require?
| bobthepanda wrote:
| With sanity in CSS, KISS goes a long way.
|
| It turns out most users do not really care for visual bells and
| whistles since visual noise gets in the way of doing things,
| which is why the lowest common denominator of shopping and
| restaurant sites have all converged on a basic design with a few
| splash photos or pretty typefaces to spice things up.
| blowski wrote:
| As with so many things in life, simple is really difficult to
| achieve.
| bobthepanda wrote:
| Of course. Simple is not necessarily easy or obvious, and
| then you have to fight the countercurrent of everyone and
| their mother having an opinion on what things should look
| like, the facts and metrics be damned.
| obiwanpallav1 wrote:
| Being a backend developer, I've always assumed CSS to be magical.
|
| Recently I needed to learn CSS to make my website viewable, so I
| started with w3schools. But the pace was too slow, and it made me
| search for other alternatives. A good amount of SEO friendly
| sites containing the list of best CSS books suggested `CSS In
| Depth - Keith J. Grant`. With low hopes, I thought to give it a
| try just for a day but it did not disappoint me. Being a CSS noob
| I liked the way `Layout` concept was presented. It started with
| `float` and ended with `grid` with a couple of chapters in
| between dedicated to `flex` and other techniques. Then it picks
| up responsive design. The concepts were presented in such a way
| that it became a responsibility for me to replicate whatever the
| author has done in the chapters. It was a satisfactory
| experience.
|
| Afterward, it presents the transition and animation related
| concepts which I read but I've forgotten because of not using
| them in day to day work.
|
| https://www.manning.com/books/css-in-depth
| Izkata wrote:
| Hmm.. I see chapter 3 is "Mastering the Box Model", which is
| the part my co-workers really don't understand and seems to be
| the whole reason they treat CSS as magical. So that definitely
| sounds like a plus for that book (especially since one of the
| headers mentions border-box), although I've never read it
| myself.
|
| From the headers it's not clear if it touches on block vs
| inline vs inline-block though, nor how margin/border/padding
| are related to each other (though that could just be mixed in
| with the border-box section). Is it complete there?
| freedomben wrote:
| I can second this and also mention that if you buy it through
| manning it is DRM free! They also have a "livebook" version
| that lets you try code right inline with the book. Highly
| recommend.
| ufmace wrote:
| The article seems to focus on what is and isn't good to read. I'd
| say, don't focus on reading at all, focus on building. Decide to
| build something that'll need some CSS, and search and read and
| try things in pursuit of the goal of getting that thing working
| right. It's more interesting and easier to remember things that
| you've actually used, or at least tried and decided not to use,
| than to just read about 50 things that you might never use at
| all.
| nkassis wrote:
| I've always found value in at least scanning some articles and
| books for general overview of what is possible. Many dev get to
| a point where they learn a method and abuse it. It's the method
| they know and have never been exposed to an alternative. They
| found something that solves the problem sorta so why go look
| for something else.
|
| While reading a lot of articles and books gives you a wider
| view, you don't have to memorize but as the article says, know
| it exists.
| [deleted]
| bryanrasmussen wrote:
| that's what you need to get competent, to get great there will
| need to be some study as well.
| micromacrofoot wrote:
| I've been primarily writing css for 15 years and I learned
| through reading spec and MDN about what I needed when I needed
| it. If you already know some css I strongly recommend reading the
| spec about the basics like display and position. A lot of junior
| developers I've hired can use css, but don't understand why you'd
| use block vs inline or flex vs grid... and knowing this stuff can
| help avoid a lot of frustration that comes with kludging around
| until you get it to work.
| marcosdumay wrote:
| That every-layout.dev link looks quite useful, to read when you
| need it. MDN doesn't have this kind of information.
| akira2501 wrote:
| Flexbox became much easier for me once I had some experience
| with tools like QT Designer and GTK's Glade. Those tools force
| you to understand the mechanics and elements that drive
| responsive GUIs more or less immediately.
|
| Once I came back to styling with CSS, I immediately understood
| how to use flex and develop slick UIs with it.
| zeta0134 wrote:
| I found this particular article instrumental in building my
| understanding of CSS's flexbox feature, which largely replaces
| decades worth of ugly, nasty positioning hacks with a handful of
| simple definitions:
|
| https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
| Beyond that, the only advice I can give when starting out is to
| avoid inline "style=" attributes like the plague, and figure out
| how you want to organize your elements, styles, and classes. This
| is the trickiest part to get a feel for, and there's no
| substitute for practice. Frameworks like bootstrap and semantic
| ui make for especially good starting points, giving you a
| collection of opt-in helper classes for the basics, letting you
| focus on adding whatever custom stuff you need for your site
| without implementing a ton of extra boilerplate. You don't need
| to use them, but they can help you get a v0.96 built very quickly
| during your prototype stage, and they're battle-hardened enough
| to be used in the wild if you decide you like their opinions.
| bogidon wrote:
| I only started feeling a sense of actually understanding CSS (as
| opposed to working on it based on acquired intuition) when I
| started reading the official specs. I think that most other
| material is an abstraction over those that usually doesn't
| explain the broader context surrounding a feature or its edge
| cases / interactions with other features. For example here's the
| spec on positioning: https://www.w3.org/TR/css-position-3/
|
| I've found directly useful information in specs that was not
| commonly pointed out in tutorials/stack overflow/etc when
| discussing those features (not remembering a specific example
| right now unfortunately). Can say the same for JavaScript.
|
| I think in general when learning about an API it's best for
| understanding to read primary sources. And thankfully the W3C
| specs are quite good documents and not too inaccessible in my
| opinion.
| FinanceAnon wrote:
| I am a backend engineer and recently had to improve my CSS to
| work on a side project. I highly recommend book "CSS in Depth" by
| Keith J Grant - it helped me to build a solid foundation.
| hirako2000 wrote:
| Don't read. Build. Don't know how to build? Look at examples, you
| will slowly but surely understand good vs bad patterns.
|
| I think reading the spec only starts to make sense once you've
| done quite a few things with CSS.
|
| Of course there is udemy /s
| zoomablemind wrote:
| > ...Don't read. Build.
|
| Makes sense in general. However there's a geat deal of
| expectations related to the intended look. These expectations
| are formed by the current looks of the popular sites, which may
| be built on frameworks. So trying to achieve such outcomes from
| scratch would be quite a lengthy journey.
|
| For a practical way to learn CSS, perhaps a set of simple
| styling objectives should be sufficient in order to understand
| the mechanics of CSS. I'm not sure if there's any value in
| memorizing the myriad of tweakable props or "the tricks" and
| browser specifics.
| hirako2000 wrote:
| I agree, no need or even possibility to build a football
| stadium to learn construction. Fix that screw holding the
| radiator. Maybe make a shelf out of wood. If you are brave
| maybe construction a patio from scratch. I think people don't
| realise how CSS and tech in general is about fiddling with
| things. And literature is becoming out dated at a faster pace
| than ever. So I would rather warn against "good" reads rather
| than recommend that path.
| riazrizvi wrote:
| Yes, and a great book format to help you do this is Mark Myer's
| _A Smarter Way To Learn HTML /CSS_. It's exercises all the way.
| [deleted]
| 300bps wrote:
| _So, I've been making websites since before CSS was a thing_
|
| Off topic but I remember when CSS stood for Content Scramble
| System and was the digital rights management technology on DVDs.
|
| Three people (two unidentified, one in Norway) cracked CSS in
| 1999 and created an app called DeCSS to remove DVD copy
| protection.
|
| https://en.m.wikipedia.org/wiki/DeCSS
|
| The movie industry took this very seriously. They got Norway to
| raid the home and prosecute the one known author. Hosting a file
| with the name DeCSS led to copyright infringement complaints.
|
| So some wise guy wrote another app also called DeCSS that had the
| sole purpose of removing Cascading Stylesheet references from an
| HTML file. It became one of the most popular hosted applications
| for a while.
| jazzyjackson wrote:
| RTFM! IMO the spec explains everything very clearly, it's just, a
| lot.
|
| anything i need more examples of, I head to MDN and css-tricks.
| blowski wrote:
| People don't just RTFM for the same reason people learning a
| language don't just read a dictionary.
|
| The manual doesn't tell you how people do things in practice,
| common gotchas you need to handle, tooling, or how to combine
| different bits together. Not to mention there are multiple
| manuals, and it's unclear to a beginner with which one you'd
| start.
| alphabet9000 wrote:
| go look at anything made by laurel schwulst for a primer on how
| to do things the right way
| jostylr wrote:
| To get some great gamified practice with some CSS concepts, I
| recommend https://codepip.com/ The well-regarded Flexbox Froggy
| and Grid Garden come from that site, but there are a number of
| other ones. I believe they all have some mini-tutorial aspects to
| them in addition to using the syntax to accomplish specific
| goals.
|
| I also recommend two that were already mentioned but I have found
| them extremely enlightening: CSS-in-depth and CSS-for-JS-devs (I
| am a programmer first so it speaks to me).
|
| I have also enjoyed the first few episodes of The CSS Podcast
| though I have not gotten to far into it.
| mouzogu wrote:
| Writing modes, box-model, margin, padding, positioning
| (relative/absolute), flexbox, grid, media queries and units (px,
| %, rem, em).
|
| I've tried following the blogs mentioned in the past but it
| wasn't really worth the bother. I don't really care about CSS
| beyond the need to use it to solve problems - and to do so with
| confidence that I know what I'm doing.
|
| That's the most important thing in CSS, to really understand the
| fundamentals so you're not frustrated or in a state of trial and
| error. Seen too many devs who work this way.
| firefoxd wrote:
| If you are just getting started, take an online class. Seriously.
| Reading page source or inspecting the applied css on other
| website will be slow confusing process.
|
| Go to lynda.com (now linkedin learning unfortunately) and take
| the css essential course, then build your own personal website.
| The videos will give you good fundamentals and your website will
| give you real world experience.
|
| No amount of advice or tricks can help you when you don't know
| the fundamentals.
| suzzer99 wrote:
| Udemy also has some good classes imo.
| f73b054 wrote:
| If you're new, start with "Tailwind CSS: From Zero to Production"
| (Video playlist, ~1 hour total, split in chunks):
| https://www.youtube.com/watch?v=elgqxmdVms8&list=PL5f_mz_zU5...
|
| Alternatively, read this (it's a chapter from a book which is
| meant to help engineers "get" design):
| https://www.refactoringui.com/previews/building-your-color-p...
|
| The book chapter outlines the philosophy, and Tailwind provides a
| functional system for putting it in practice.
|
| For both of these, you don't need any CSS background. Not only
| does the video series teach you Tailwind, it'll also give a
| foothold onto CSS, and how to use it in practice to make
| reasonable websites even if one is design-challenged.
| andrei_says_ wrote:
| You can learn Tailwind but it's not CSS. You'd be learning a
| proprietary utility class framework.
|
| I use ITCSS, BEM and some utility classes in my projects.
|
| I also like and use Tailwind's presets for colors and spacing
| as SCSS variables - but still write my css.
| atom_arranger wrote:
| Tailwind is almost CSS. Most Tailwind classes only apply one
| CSS property/value.
|
| If you needed to code the same thing without Tailwind you can
| easily convert the syntax.
|
| I would agree more with "Bootstrap is not CSS."
| john-doe wrote:
| > Tailwind provides a functional system for putting it in
| practice.
|
| Alternatively, you could write CSS to get better at CSS.
| rvense wrote:
| Tailwind is CSS. You are writing CSS, just in a slightly
| different way. It's not a magical framework or a big box of
| ready-mades.
| jrochkind1 wrote:
| > how you optimally structure your CSS for composition and reuse.
|
| I have the most trouble with this with CSS. I'm ordinarily at
| keeping my programming logic well-organized and maintainable, but
| with CSS I do bad and feel bad about it.
|
| Appreciated the references for some things to read on this.
| oblak wrote:
| I feel like your approach should depend on your particular
| project/needs.
|
| With modern frameworks, CSS/SCSS is often "scoped" to
| components which could lead to just a handful of general
| purpose or page specific CSS files that need no organizing as
| files go.
|
| Content of said files is another topic. Inheritance is built in
| and you can overwrite pretty much anything from everywhere.
| That's both good and bad.
|
| If you happen to reuse something, put in (one of your) main css
| file. Having your own set of lego block goes a long way.
| rameshkm wrote:
| https://web.dev/learn/css/
| gfxgirl wrote:
| it really depends on what you are trying to make and several
| common designs are not entirely intuitive.
|
| for example, if you want to make a single screen app (the body
| doesn't scroll) I know of no css frameworks that do this.
| Tailwind, Bootstrap, are for height unrestricted pages. I'm not
| sure what a good example of single screen pages are, maybe
| codesandbox, google maps, google slides, codepen. Maybe someone
| has a suggestion for a framework that handles l the conatraints
| of keeping a bunch of content panes filling the window and no
| more with all the pane's content able to fill the pane with zero
| issues. I always find that trying to get say a canvas to be 100%
| of its container in such a situation to be trial and error.
|
| another imo unintuitive CSS design is the Medium style of
| paragraphs have a max-width but images do not. The arguably
| normal way to constrain a bunch of content is a wrapper for all
| of that content and the wrapper is set to the max-width. But that
| doesn't work if you want images to go bigger than that wrapper.
| I'm not saying it's hard, only that it was different than just
| about every previous site out there. and imo "margin: 0 auto" is
| not an intuitive way of centering
|
| (not saying they did it first)
| Macha wrote:
| For the first paragraph:
|
| Put your outermost container as {
| box-sizing: border-box; width: 100vw;
| height: 100vh; overflow: none; }
|
| vw/vh are units based on the viewport width and height. 1vw is
| 1% of the viewport interior width, 1vh is the same for height.
| The border box box model ensures that padding and borders
| subtract from the interior dimensions rather than add to the
| exterior dimensions.
|
| You may also want to use <meta viewport> to control zooming on
| mobile devices: https://developer.mozilla.org/en-
| US/docs/Web/HTML/Viewport_m...
|
| Then you can use grid to divvy up that internal space without
| having to deal with the kind of rounding issues that using ems
| or %s used to have
| antihero wrote:
| Honestly I'm much happier to do web again since I can avoid CSS
| and use Tailwind
| speedgoose wrote:
| You are basically doing the same using another syntax which has
| some pros, and a lot of cons.
| CharlesW wrote:
| > _You are basically doing the same using another syntax..._
|
| You seem to be thinking of Tailwind as just syntactic sugar.
| If that's your lens and you're not leveraging its strengths
| as a framework, then yes -- you might as well use raw CSS.
| speedgoose wrote:
| I do thing that it's a bit more than replacing the style
| attribute with the class attribute using a billion classes
| and css rules that needs to be removed later on, but not
| much more. You need to know a lot of CSS anyway to
| understand what tailwind is doing.
|
| Raw css is not the perfect solution either, I personnally
| prefer SCSS but I hope to see better solutions.
| air7 wrote:
| I've actually been wondering the opposite: What do I need to
| read/use to avoid knowing (as much as possible) about CSS?
|
| Not caring for pixel-perfection, I want to be able to develop
| simple UIs intuitively, without any need to code (css) anything.
|
| What are my options?
| crispyambulance wrote:
| You really can't avoid CSS unless you use turgid, opinionated
| and increasingly out-of-date stuff like Bootstrap and it's ilk.
|
| If you just want to be able to execute your will intuitively,
| it's much better to learn "enough" modern CSS and stick to
| modern browsers.
|
| Now with CSS Grid for layout it's so much less frustrating than
| just having Flexbox, and a world away from the dumpster-fire
| that was Floats (and before that, html tables).
| agumonkey wrote:
| I agree, for all functional layouting (not text) grid gives
| you so much for so few. You can spend a year trying various
| float tricks and get nowhere, or napkin write a grid layout
| and get going in 5 minutes.
| nomdep wrote:
| Pre made UI libraries like Bootstrap or Tailwind UI
| shane_b wrote:
| I use Tailwind and I purchased their templates. They provide
| starting points for common web features. Stuff that would take
| a lot of time to make.
| tshell wrote:
| Making Sense Out of Suffering by Peter Kreeft
|
| Man's Search for Meaning by Viktor Frankl
|
| The Book of Job
| dukeofdoom wrote:
| I found this guy on youtube, his channel is all about programming
| CSS, Bob Ross vibes. 379k subs.
|
| Learn and relax.
|
| https://www.youtube.com/kepowob
| austincheney wrote:
| My first job out of college was writing html/css for email
| messaging. In the case of webmail you had to contend with the
| butchery of email clients, email servers, and the browser. That
| was when IE7 just came out which had a different box model than
| IE6. That was the school of hard knocks.
|
| After that CSS has been mostly trivial to write cross browser for
| me. The biggest challenges I would encounter are helpers, like
| jQuery or frameworks, getting in the way and breaking things.
| jlos wrote:
| I'm surprised no one mentioned Lea Verou's "CSS Secrets" [0].
| Most books I've read will give some depth at how aspects of CSS
| work, or recommend a best practice, but Verou's work is the only
| one I've seen that sees using CSS as an engineering solution. The
| book is a collection of problems, e.g. "how to add multiple
| borders?", And the shows different ways to solve the problem
| given the available CSS. Each solution discussed trade-offs,
| constraints, etc.
|
| It will go the farthest in teaching you _how_ to think about CSS
|
| [0] https://www.oreilly.com/library/view/css-
| secrets/97814493727...
| agumonkey wrote:
| verou's bits are superb, always fun, interesting, small enough,
| deep enough
|
| top notch
| egberts1 wrote:
| I love my tri-axial text-rotational trick written in only in CSS
| (and HTML).
|
| JavaScript-free too!
|
| https://egbert.net/blog/index.html
| sandreas wrote:
| I think Kevin Powel[1] is worth more than one mention... Although
| I think Video-Tutorials are usually inferior to text based
| tutorials regarding the time it takes to learn something, I don't
| think so in this case... he has mostly awesome stuff and really
| focuses on the important things.
|
| A lot of my personal collection of CSS tricks[2] are inspired by
| his videos...
|
| [1] https://www.youtube.com/user/KepowOb [2]
| https://pilabor.com/blog/2021/03/html-and-css-tricks/
| codegeek wrote:
| I think that CSS is 80% learning how to position things. Once you
| really grasp that, rest 20% is a lot easier. I also struggle with
| the whole container/box thing and not to mention
| position:relative vs absolute and what not. But then there are
| the easy ones like margin/padding/color etc.
| brianzelip wrote:
| 'CSS & Scalabilty', Adam Morse.
| https://mrmrs.cc/writing/scalable-css/
| cgdub wrote:
| In a similar vein, `React: CSS in JS` from vjeux:
| https://blog.vjeux.com/2014/javascript/react-css-in-js-natio...
| tdrdt wrote:
| I believe there are two things everybody should know about
| HTML/CSS that could help you immensely.
|
| 1. Know that everything is a box that wants to float up. Learn
| about `display` and `position`.
|
| 2. Know about how things are measured. I think this is what
| causes the most troubles. You think something is 50% so it should
| fit, but it doesn't. Almost all of these problems go away with
| `*{ box-sizing: border-box}` but you should learn about this.
| mattwad wrote:
| Like everyone's saying: read the specs and start with basics.
| everyone thinks they can just skip over that, and it's too common
| to see a lot of poor choices even by the frameworks. I was
| fortunate enough to have to learn before flex or grid display lol
| i_am_proteus wrote:
| What do you need to read?
|
| The source of web sites that have good design. Use developer mode
| on a browser. You can edit their CSS live and see the results.
| You can change the viewport and see how it renders on mobile. You
| can figure out what's using JS and you'll come to your own
| conclusions on whether that's the right way to do things.
|
| While you're reading, start building things from scratch. MDN is
| a great resource if something doesn't make sense.
| ehutch79 wrote:
| Understanding the cascade, general experience with building many
| varied sites, and hard work
| z3t4 wrote:
| And that more specific rules override the cascade. And once you
| feel comfortable - try avoid using classes. (never use id)
| tomcam wrote:
| Wait wut? Sounds intriguing but also terribly inefficient.
| tekkk wrote:
| I like writing CSS to some extent. You get the immediate
| satisfaction of visibly getting things done and compared to a lot
| of other things, it's just memorization of few tricks and rules.
| It's the persistence of wanting to get things just right and not
| being satisfied with them being a little wonky that I guess makes
| the great dividing line.
|
| If you don't like polishing details, well you are in a bit of bad
| luck. Unlike with backend code, with CSS your mistakes will show
| and be evident to everyone who can distinguish bad design from
| good.
|
| And often doing less is better. It might sound self-evident but
| when you are making some dumb positioning with tops and lefts you
| are probably doing it wrong. Or there can be an easier solution.
| And when you color or add borders you probably want them to blend
| in, not stand out. Often a very small change in hue can be enough
| to provide depth and contrast.
| [deleted]
| potta_coffee wrote:
| CSS isn't that hard until you're told to implement crazy designs
| made by people that don't understand CSS.
| kadomony wrote:
| It even helps to just study frameworks' documentation. Tailwind
| and Foundation/Bootstrap are both great ones that approach CSS
| through different opinionated structures.
| mattlondon wrote:
| I would recommend learning by doing. Don't waste time reading a
| book - just get out there and do things.
|
| Top tips for someone starting out: learn the box model, then look
| at flexbox or grid. MDN is pretty much all you will need in terms
| of reference and pared-down examples
| dreyfan wrote:
| > Don't waste time reading a book
|
| I'm guessing you have little experience with books but the
| general approach is you read something and then practice what
| you just learned.
| [deleted]
| rectang wrote:
| > _Don 't waste time reading a book_
|
| Somewhere on the continuum between "learn by doing" and "learn
| by studying", the truth lies.
|
| I mostly learned CSS by happenstance "doing" and have been able
| to do a fair bit, but I didn't really understand selectors
| until I went through a book on CSS.
| mattlondon wrote:
| There is a good MDN page on CSS selectors that takes about 5
| minutes to read. Sorry you wasted time reading a whole book!
| You can't get that time back.
| rectang wrote:
| > _There is a good MDN page on CSS selectors that takes
| about 5 minutes to read._
|
| I've read that page! In fact I reviewed it while reading
| the book, along with many other MDN pages.
|
| https://developer.mozilla.org/en-
| US/docs/Learn/CSS/Building_...
|
| That page is actually part of an MDN module, which is sort
| of like a book. I actually considered going through that
| MDN module methodically, but ultimately chose a book I
| thought was more suitable for my needs.
|
| For me, developing a sense of mastery over selectors meant
| studying all their variations and practicing with all of
| them. I also had to understand that "selectors" were a
| thing in the first place -- a coherent and scope-limited
| topic that I could study and master. I didn't really get
| that from all of my CSS practice -- the book gave me an
| agenda I wasn't able to develop on my own.
|
| > _Sorry you wasted time reading a whole book! You can 't
| get that time back._
|
| It's not like it was an entire book on selectors. I don't
| need that time back -- it was productive, and I learned a
| lot about many aspects of CSS.
|
| Of course, it would have been _less_ productive if I had
| not already accumulated a lot of knowledge via the "learn
| by doing" method. I'm certainly not opposed to that... it's
| jarring to see someone so adamantly opposed to books.
|
| (For the curious, the book was _Architecting CSS_ by
| Martine and Michael Dowden. It 's not really a beginner
| book. I chose it because I needed to understand how to
| organize CSS in large projects to get more predictable
| behavior and reduce time spent on maintenance and
| debugging).
| matthew_kuiash wrote:
| Totally this ^^^. I still battle with CSS. I have no love for
| it but the best way I've found to approach it is to have some
| idea of what I want to achieve visually and work from there.
| Almost everything one would seek to achieve has been done by
| $someone and is out there on the internet. Steal it! Sometimes
| it's blog posts, sometimes I just scrape other sites (modern
| browser _really_ help here). But yup, grid, box, floats. MDN
| rocks.
| extra88 wrote:
| Speaking of battles, I've liked trying CSS Battle's
| challenges. Kevin Powell and some others have YouTube videos
| where they compete but it's not really that competitive.
|
| Don't worry about minimizing the number of characters, try to
| match the challenges 100% with just enough HTML and just
| enough CSS rules and properties to be elegant.
|
| https://cssbattle.dev/
| sixQuarks wrote:
| CSS for Javascript Developers. It's a paid course but it's
| fantastic
|
| https://css-for-js.dev
| charesjrdan wrote:
| I also am taking that course (1/3 completed so far, it's a long
| course) and have some things to say. Not affiliated in any way,
| my company paid for it.
|
| I think it doesn't teach anything you couldn't learn yourself
| by reading the spec or css-tricks etc, however there's just no
| way I would have bothered reading those things myself as in
| depth as I am going with the course. There's definitely some
| information in the course that I don't feel is useful, and I
| already knew quite a lot about css so most of it is familiar,
| but I still learn important things every time I sit down and go
| through a module. And I love the interactivity and actual
| practical challenges included.
|
| So overall I give it an 8/10, and would recommend to anyone
| working (or who aspires to work) on the frontend.
|
| Is it worth $350? If you're on an average dev salary then yes,
| if you're in school or not exactly floating in money, then I'd
| say stick to just reading free content online or making things
| you enjoy and learn by doing.
| himatthew wrote:
| I second charesjrdan's point. If money isn't a huge factor
| for you and it's a course you're excited enough to pursue
| then go for it.
|
| The course isn't necessary however. Reading through MDN docs
| in addition to Josh W Comeau's blog should get you 90% of the
| way there, if not all the way there.
| neither_color wrote:
| I took this course and it really is superb. Josh builds mental
| models like media queries as IF statements and compares
| selector specificity to prototypal inheritance. It's mentally
| really sticky stuff. He also goes in depth into the different
| layout modes(flow, position, flex, grid) and ensures you know
| the differences between them, when to use one over the other,
| in which cases one overrides the other, etc. If when youre
| building something you go through every combination of flex,
| grid, & position and not really sure which one is going to get
| you closer to the layout you want, these exercises will build
| your confidence. He breaks down lots of edge cases and quirks
| that go into CSS that Id consider "mastery" level that only
| someone who dreams in CSS would know off the top of their head.
|
| Note: Not affiliated in any way.
| theklr wrote:
| Just echoing the other users. It's definitely great and the
| community that comes with it is good, but the value prop it's
| asking for, particularly since it's attempting to charge a
| college course, you can be fine through trial by fire. A
| meetup, or even a proper discord can give you similar value.
| Raed667 wrote:
| One heck of an expensive course. I guess the goal is to get
| your manager to pay for it.
| sixQuarks wrote:
| The lowest price tier is $125 though.
| Raed667 wrote:
| $125 doesn't even get you flex-box or responsive design.
| metters wrote:
| If you live somewhere where this price is too expensive
| (south America or some SEA country for example) Josh offers
| to send him an email and he will give discount, if he agrees
| that it is fair.
|
| Edit: adding source for my claim. Go to the website of the
| course that was already posted here and search for
| "Purchasing Power Parity"
| hacful-tonteg wrote:
| $349? What price are you getting? (The course is regional
| priced)
| Raed667 wrote:
| I get $418.8 with taxes.
| AltonWells wrote:
| Unpopular opinion: Webflow and CSS docs.
|
| Webflow will teach you every pattern for building pretty things
| and docs will let you match the buttons to code.
| blowski wrote:
| I instinctively downvote any comment that starts with
| "unpopular opinion...". It reeks of "only edgy rebels will
| upvote this!" and is usually boring.
| andrei_says_ wrote:
| I recommend learning about BEM and Inverted Triangle CSS (itcss)
| approaches. ITCSS dramatically improved how I write css as it
| naturally works with the cascade and removes most duplicate
| efforts.
|
| https://www.xfive.co/blog/itcss-scalable-maintainable-css-ar...
|
| https://www.digitalocean.com/community/tutorials/how-to-solv...
|
| Also, css-tricks.com is a great resource and a hub of the css
| community.
|
| SCSS / Sass is the most mature, stable, and powerful professional
| grade CSS extension language.
|
| Apart from these I'd look into using consistent type scales
| https://type-scale.com/ and definitely learn css-grid.
| mderazon wrote:
| As a developer, my problem with css has always been this: I want
| to build a website for some project I'm working on, then I
| realize I have no idea how to design it, so I start looking for
| nice looking templates online and get to a rabbit hole of
| templates that has nothing to do with css.
|
| Them I basically realize that css is not my (first) problem. I
| have no idea how to design a website that looks good.
| tomcooks wrote:
| I suggest taking an used A4 piece of paper and fold it in
| thirds on both the horizontal and vertical side.
|
| Holding the paper vertically, you'll notice you now have 3 main
| sections (header, intro, rest of the page) and 3 columns you
| can arrange your content into.
|
| Take another A4 piece of paper, fold it in 3 and then in half
| this time, you'll have 3 main sections and 2 columns in each
| section.
|
| Now cut each of the 3 blocks from each paper, you will end up
| with 6 sections (3 with 3 columns and 3 with 2 columns)
|
| Try and write some of your content down on these 6 Lego blocks
| you created, sketch images (or just draw a rectangle with an X
| inside, that means "image placeholder" in graphic design
| layouts).
|
| This exercise will help you understand how design is just
| content split in manageable parts.
|
| You'll soon notice most sites are not monoliths, but the very
| same blocks you jotted down on paper.
|
| This will make your template-scavengig effective, you'll notice
| you like certain types of blocks (say 3 columns with a
| background image) and dislike others (say hero banners with
| buttons). Steal the ones you like (crop screenshots and save
| them), then see if you can see what you like in each of those
| you saved. Try and recreate them as abstractly as you can
| either on paper or by using the rectangle tool in any graphic
| editor (don't get lost making it perfect, you'll get there
| faster by doing it by code instead than using graphic design
| tools).
|
| Toy with design, it's all a fad anyway and what matters is what
| I've outlined here: blocks, columns, steal what you like.
| sireat wrote:
| You are not alone.
|
| I have a decent amount of experience starting with plain HTML
| in 1995 and table based layouts in late 199xs. Modern CSS grid
| named areas are awesome!
|
| However, whenever I teach at bootcamps and at a university 90%
| of my students produce better homework than my own pages.
|
| It is a combination of lack of design chops and lack of time to
| perfect.
|
| I can talk about transitions, color theory and everything but I
| have no eye for it.
|
| So I when I need something quick and dirty I fall back to
| Bootstrap at least it will not be absolutely horrible.
| JoeyJoJoJr wrote:
| Most bad designs I've seen can be dramatically improved with
| some very basic design concepts that I think most developers
| can learn, at least towards getting the design looking
| relatively 'clean'.
|
| If you can't apply a theme or make use of a designer, keep all
| your colors gray, and just focus on the shades. Darker shades
| to bring emphasis.
|
| Secondly, make sure there is consistent padding, margins, and
| alignments. This is more tricky because it requires you to see
| the empty spaces and think of them as their own elements.
| Always be looking for areas of inconsistency and misalignment.
| This finicky because just two pixels offset here and there can
| have a big impact, but it is very much worth making thing look
| more consistent.
|
| Lastly, look for opportunities to reduce the total number of
| visual elements in busy areas (within reason). Good examples of
| superfluous elements example might be outlines around icons,
| underlines, borders, two "empty space rectangles" that can
| become a single rectangle.
|
| I've found 70% of my design methods are just applying these
| three concepts over and over again, and formulating somewhat
| logical principles to apply them. My designs aren't as good as
| what a designer would produce, but are much higher quality than
| I didn't apply any thought to design at all.
| gamerDude wrote:
| I have this problem too. And unfortunately as I go through the
| templates. I don't really like any of them. And I generally
| quit and just use basic bootstrap.
|
| And even the templates I have used end up being so incredible
| messy and full of things like bootstrap overrides that effect
| the rest of the site in unexpected and unwanted ways that I try
| to stay away from them as much as possible now.
|
| I just really want isolated designed components that I can put
| around the site. But I haven't found an option I like their
| either. :(
| 734129837261 wrote:
| I live and breathe CSS and have since its inception. Having
| interviewed job applicants of all levels for front-end positions
| I can only say, boy oh boy, most people seem to think CSS is
| arcane magic.
| racl101 wrote:
| > Articles on features that haven't shipped yet and may never
| ship everywhere.
|
| > Advanced features that address specialised use cases you're
| never going to encounter.
|
| This is why, as a backend developer, with little time to invest
| into CSS, I will rely almost 100% on frameworks like Bootstrap or
| Tailwind. I do not have time to go and check if a feature has
| been adopted on most browsers or whether they are super advanced
| or unorthodox.
|
| By using a framework I trust that people much smarter than me at
| CSS and who actually gives more of a damn at keeping up with it
| have worked a feature into the framework and if it is not found
| then that is a limitation that I do not wish to overcome with
| research, hard work or trial and error.
|
| If I can use some brevity: I have other, usually more important,
| shit to do.
| asimpletune wrote:
| Haha I like "usually" part, very honest.
|
| I'm a backend engineer too and I learned most of this css stuff
| fairly easily in a few weeks without much pain. The truth is
| something like tailwind can get you to understanding 95% of
| css, just by digesting someone else's editorialized model of
| it. You also sidestep a lot of issues with class-based nature
| of CSS, which just complicates the learning experience.
|
| I can copy/paste an extremely complicated layout that I made in
| tailwind to an entirely different section of html or the
| codebase, and 99% of the time it just works.
|
| Anyway I highly recommend to everyone who comes from a backend
| background to just learn something like tailwind. It's
| basically css, just expedited and editorialized by
| professionals. When you run into gaps in the metaphor they're
| easy to understand why they're there, and you can easily add
| them yourself using their plugin system, which fit me just
| enhanced my own learning.
| [deleted]
| e12e wrote:
| > You also sidestep a lot of issues with class-based nature
| of CSS, which just complicates the learning experience.
|
| I'm not sure I follow - tailwind is entirely class based, but
| fights hard against the "cascading" in cascading style
| sheets?
| asimpletune wrote:
| Maybe I'm not using the right terminology - definitely not
| an expert - but I think Tailwind is "utility based".
|
| When I said side step issues with class-based natured of
| CSS, I meant there's really no way to leverage the
| cascading nature of CSS using tailwind. You don't even
| really write css in tailwind. Because of this you get code
| duplication, but your styling is super portable. This, I
| think, is the nature of using a utility based framework.
| You can literally copy and paste almost anything and it
| will probably work, because the specificity doesn't depend
| on any sort of class hierarchy or make any assumptions
| about the structure of your css classes.
|
| They're basically inline styles but use class names that
| are designed to be more useful than just writing css
| inline. Basically a light amount of editorialization.
|
| But like I said I don't really know, so if someone knows a
| better way to word what I'm trying to say please correct
| me. I think the tailwind creator said something like "the
| canonical way of writing 'modular' CSS just doesn't work"
| (I'm paraphrasing but something to this effect).
| e12e wrote:
| Sounds like we agree - you don't mean classes, you mean
| issues of cascading and specificity.
|
| See eg: https://alistapart.com/article/braces-to-pixels/
|
| for a brief overview / recap.
|
| The "other" options to utility/tailwind approach is to
| avoid classes, and use semantic html (easier in HTML5,
| where you can just decide you'll have an <article> with
| <lede> and <section>s) or heavily customized css classes
| (like bootstrap).
|
| Main difference between tailwind and bootstrap, is that
| bootstrap still assumes you'll have some container-
| elements that wrap other elements - while theoretically
| tailwind styles every element in isolation. (sort of)
| dredmorbius wrote:
| Fixing annoyances of highly-obfuscated Google+ sourc using
| Developer Tools under Chrome and (my strong preference) Firefox,
| a style-manager extension (Stylus), the W3C documentation,
| Mozilla's web dev discussions, and Stack Exchange and Reddit
| discussions did the trick for me.
|
| Then again, my design ethic is 14 motherfucking rulesets:
| https://codepen.io/dredmorbius/full/KpMqqB
|
| YMMV.
|
| (Given my recent adoption of a B&W e-ink device, I'd either
| reverse my preference for off-white / off-black for straight
| white/black, or use @media queries to probe for device colour
| depth. On balance, I'd probably opt for the first, simpler
| option. Getting font-size correct for the reader, line-lengths to
| a readable width, and margins such that text does not run into
| the gutters is really the principle objective.)
___________________________________________________________________
(page generated 2021-10-23 23:01 UTC)