Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Things I wish I’d known about CSS

cssfordesigners.com

Post reply on HN
Print view View original

301–310 of 340 posts

Re: Things I wish I’d known about CSS

#301

Post by pdfernhout »

theelous3 wrote: post #141
k__ wrote: post #126

It always helped me to do an absolute basic concepts course on a new technology I learn. Like, sure I can play around in Photoshop or Eclipse or CSS or JavaScript and find most things. But a good 101 course is worth so much saved time. Most of the stuff in that article was mentioned in a CSS box model course I did 10 years ago. People were always baffled how I learned all this. Well, I read the docs! They always assu…

Cobbler here, currently cobbling a frontend (am a backend dev by trade). The issue for me is the format these courses and resources take. CSS is the most jam packed with non-intuitive technology I've met. How many dozens of pages or segments of video would I have to go through in a course to learn what the author in OP summarised in two or three sentences? Any time I've considered the structured approach for somethin…

Check out Tachyons or another atomic CSS system. It makes CSS so much easier to use (especially in single-page apps written in JavaScript). https://tachyons.io/ "Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible."

See also: https://css-tricks.com/lets-define-exactly-atomic-css/ "Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function."

Or from: https://acss.io/ "CSS is a critical piece of the frontend toolkit, but it's hard to manage, especially in large projects. Styles are written in a global scope, which is narrowed through complex selectors. Specificity issues, redundancy, bloat, and maintenance can become a nightmare. And modular, component-based projects only add to the complexity. Atomic CSS enables you to style directly in your components, avoiding the headache of managing stylesheets. Most approaches to styling inside components rely on inline styles, which are limiting. Atomic CSS, like inline styles, offers single-purpose units of style, but applied via classes. This allows for the use of handy things such as media queries, contextual styling and pseudo-classes. The lower specificity of classes also allows for easier overrides. And the short, predictable classnames are highly reusable and compress well."

Mostly though, Atomic CSS is a state of mind or design pattern. So you can do it from scratch without support from something like Tachyons etc. -- but it helps.

You might even find it fits right in with your "cobbling" style of development. As an example, if you want to make some text red, you add the style "red" to it. If you want a border all around something, add a "ba" class. If you develop using HyperScript (like from Mithril) to define your UIs, code might look like this: h("div.red.ba", "This is red and has a border")

I refer to the Tachyons style sheet as essentially a menu of options: https://github.com/tachyons-css/tachyons/blob/master/css/tac...

In the rare case something is missing I do an inline style or add something to a single supplemental stylesheet written in a similar way.

There is also a verbose version of Tachyons without the abbreviations, so "ba" would be "border-all" (though I prefer the abbreviations): https://github.com/tachyons-css/tachyons-verbose/blob/master...

Re: Things I wish I’d known about CSS

#302

Post by tiglionabbit »

nwallin wrote: post #210
k__ wrote: post #126

It always helped me to do an absolute basic concepts course on a new technology I learn. Like, sure I can play around in Photoshop or Eclipse or CSS or JavaScript and find most things. But a good 101 course is worth so much saved time. Most of the stuff in that article was mentioned in a CSS box model course I did 10 years ago. People were always baffled how I learned all this. Well, I read the docs! They always assu…

> I always have the feeling people just cobble around for too long and should instead take at least a few days for a more structured learning approach. There are two kinds of documentation: there's a list of all the individual things you can do, and there's a "The fundamental abstraction is this ". The second is rare, and rarely done correctly, and much more important. A lot of people assume that X is like Y, but wit…

Exactly. Another fundamental abstraction they should have mentioned in the article is [the surprising way z-index actually works](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positio...), especially being aware of the existence of [stacking contexts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positio...).

Re: Things I wish I’d known about CSS

#303

Post by dahfizz »

balfirevic wrote: post #299
dahfizz wrote: post #296

Earlier quoted context omitted.

Is that right? I think inflation makes the effective interest rate lower than the nominal rate. You could imagine that inflation pays ~1% of your mortgage for you because each dollar that you owe is becoming less and less valuable.

Effective interest rate is, to my understanding, not related to inflation. It's just a way to make loans with various compounding periods easily comparable (I'm mostly citing this from Wikipedia, I'm far from expert here: https://en.wikipedia.org/wiki/Effective_interest_rate ) I just mentioned it for the sake of providing more information to whomever was reading my comment.

You're right, I confused effective and real rates.

https://www.investopedia.com/articles/investing/082113/under...

Re: Things I wish I’d known about CSS

#304

Post by disqard »

umaar wrote: post #71
techbubble wrote: post #59

This was a great article and I learned a few new tricks. I learned CSS over the years by gradually solving problems I encountered building apps. Compare this to people learning CSS now as evidenced by the #100DaysOfCode tag on Twitter. The learning technique is comprised primarily of using gradient-heavy, absolutely positioned HTML elements to create a photo-realistic, 3D rendering of objects. The results are pretty…

I learnt CSS in a similar way. I'd take Photoshop designs and try to recreate them in vanilla HTML + CSS: https://jsfiddle.net/umaar/YNA5V/ https://jsfiddle.net/umaar/fu4TT/ I'd even make 3d graphics of things like the HTML5 logo: https://i.imgur.com/kuEYpSV.png I posted this all to a community called "Forrst" (think of it like twitter, but curated for developers and designers). I spent time giving feedback on other…

I like that you'e carved out a space for yourself -- one that cannot just disappear due to an acquisition followed by a "pivot".

Thank you for making and sharing!

Re: Things I wish I’d known about CSS

#305

Post by jamaicahest »

k__ wrote: post #126

It always helped me to do an absolute basic concepts course on a new technology I learn. Like, sure I can play around in Photoshop or Eclipse or CSS or JavaScript and find most things. But a good 101 course is worth so much saved time. Most of the stuff in that article was mentioned in a CSS box model course I did 10 years ago. People were always baffled how I learned all this. Well, I read the docs! They always assu…

After spending years learning on the job, I started reading the documentation books cover to cover, and I have never looked back. Colleagues are often amazed at my "deep knowledge" of the technologies I use, however I mostly know what is written in the manual. It baffles me that people can't be bothered to read the documentation and at the same time complain that "X is too hard! Let's use Y instead!"

Re: Things I wish I’d known about CSS

#306

Post by tr1coder »

epicureanideal wrote: post #244
tr1coder wrote: post #127

Earlier quoted context omitted.

The inexcusable fact here is that he said that he didn't know how it works. A font-end developer not knowing grid is not worth 6 figures.

I disagree, as both an engineer and a manager. CSS grid is only recently becoming a reasonable tool to use in practice. I don't think any of the top 1% of front end engineers I know would be able to use CSS grid without looking at the documentation. Based on experience, the kind of person who would be able to use it from memory either 1) is very skilled AND had a reason to use it recently, or 2) someone of medium ski…

That depends on your company I guess. If your entry salary is, or is close to 6 figures then yeah. But if you pay that only for skilled developers _specializing_ in front-end then it is not too much to ask that they are up-to-date with their field.

Re: Things I wish I’d known about CSS

#307

Post by mekster »

paozac wrote: post #17

Useful article. Getting started with CSS must be harder these days than it was 15-20 years ago. Not only for mobile-friendliness, but also because of the coexistence of flexbox/grid/traditional layouts. I'm wondering if the standard will ever been simplified, instead of being added more and more features.

Css is getting better not harder.

Back then, you had to put some image to make a fake border-radius.

Or some weird hack because table layout doesn't wrap.

And using a different technology that is flash because css couldn't animate.

Not to mention the existence of transpilers like stylus that make writing far easier and we no longer have IE6 that behaved on its own rule.

Re: Things I wish I’d known about CSS

#308

Post by afarrell »

commandlinefan wrote: post #283
nwallin wrote: post #210

Earlier quoted context omitted.

> I always have the feeling people just cobble around for too long and should instead take at least a few days for a more structured learning approach. There are two kinds of documentation: there's a list of all the individual things you can do, and there's a "The fundamental abstraction is this ". The second is rare, and rarely done correctly, and much more important. A lot of people assume that X is like Y, but wit…

> there's a "The fundamental abstraction is this" In most cases, I'd settle for "what problem this is trying to solve" (although this is obvious for CSS, it isn't nearly as obvious for things like React and Vue).

The problem here is that really understanding "what problem this is trying to solve" often requires a passing familiarity with cognitive science.

How many people here could explain the link between Working Memory and React.js?

Re: Things I wish I’d known about CSS

#309

Post by afarrell »

cosmodisk wrote: post #169
theelous3 wrote: post #141

Earlier quoted context omitted.

Cobbler here, currently cobbling a frontend (am a backend dev by trade). The issue for me is the format these courses and resources take. CSS is the most jam packed with non-intuitive technology I've met. How many dozens of pages or segments of video would I have to go through in a course to learn what the author in OP summarised in two or three sentences? Any time I've considered the structured approach for somethin…

Couldn't agree more. I had less issues learning multiple programming languages,some challenging concepts around them and yet when it comes to CSS, most resources aren't very useful. You do something and it doesn't work. You check documentation and it show exactly the same thing that does work. 5 hours later it turns out it was some overriding property+ browser incompatibility+ weird undocumented exception. Very few b…

> the whole ecosystem is a bit weird

The whole ecosystem reminds me of why I did not study synthetic biology or medicine. I prefer the systems I work with not to have evolved but to have been designed by some intelligence with a limited memory for random details.

Re: Things I wish I’d known about CSS

#310

Post by afarrell »

runarberg wrote: post #275
theelous3 wrote: post #258

Earlier quoted context omitted.

"here I am, at the end of the maze, telling people at the beginning how straight forward it is" is basically all I'm getting here - and you call my eval problematic. Multiple accounts of people not in your position telling you a problem exists. Ok, great, you worked through it. Doesn't mean it's as good as it should be.

Well you come across as an outsider telling us that the tools that we use—and do a fine job with—are no good, and that our literature sucks. I am here to argue that this sort of attitude is problematic. If you browse through this thread you will find no shortage of comments describing how absolutely basic this article is (and a little void of insight, and a little out dated), and that there are people in the industry…

> There definitely exists a lack of respect for the craft of front-end development within our industry. This sort of attitude is not helping.

There is xenophobia involved in people's attitudes toward kebabs. It doesn't change the impact of phosphates on the human body.

Here: https://www.bbc.co.uk/news/world-europe-42238363

Your argument doesn't change the impact of poorly-encapsulated complexity on the brains and mental health of your fellow programmers.

https://blog.codinghorror.com/programmers-and-chefs/

> Well you come across as an outsider telling us that the tools that we use—and do a fine job with—are no good, and that our literature sucks.

https://en.wikipedia.org/wiki/The_Jungle

---------

Backend programming has this problem too. So does systems programming. The problem of unencapsulated complexity is core to the craft of software engineering.

So is joining the fight against this problem. https://tonyarcieri.com/would-rust-have-prevented-heartbleed...

Post reply on HN