7 ms·

Writing CSS Algorithms

66 points by skilled 8y ago

userbinator 8y ago
I was expecting something along the lines of https://news.ycombinator.com/item?id=10734966 https://news.ycombinator.com/item?id=10734966 or https://news.ycombinator.com/item?id=2300836 https://news.ycombinator.com/item?id=2300836, or a discussion on how to implement CSS in a browser, but this article seems to be really more about "algorithms for writing CSS".
geokon 8y ago
Whats a good place to learn CSS for someone with programming experience? I've been in my low-level C++ world for a long time and am pretty out of touch with GUI/Web things. I was writing some JavaFX code and saw it can be extended with CSS, but I don't know where to start. I'd also like to tweak the CSS on my webpage, but also don't know what's what. What I've found online is targeted towards people starting out coding with Javascript so it's very slow and hands on and doesn't step back and explain the big picture
- HillRat 8y ago
  Eric Meyer’s CSS books for O’Reilly are unsurprisingly exhaustive. For incremental, hands-on work, try using Codepen to slowly work your way through bounded use cases (e.g., set up a pen and just work on styling buttons, or flex layout, or transforms); Codepen also lets you use preprocessors like SASS and LESS inline, so it’s a great way to get used to the various quirks of CSS and its toolchains without having to set up entire projects.
- ibrault 8y ago
  +1 to HillRat's answer (especially hacking around in Codepen). On top of his, I want to plug the Mozilla Web Docs [0]. They're absolutely wonderful to reference for all your CSS needs, especially if you learn well from reading the docs. On top of that, they have excellent tutorials as well. I would consider checking out their one on CSS [1], you might find it easier to get through than an O'Reilly book. A little unrelated but as someone who also loves their C++ and low-level programming I really enjoyed Lin Clark's articles on Firefox's Stylo [2] and WebRender [3], I think they do a great job of intuitively explaining the back-end behind CSS rendering, if that's of any interest to you. [0] https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/ [1] https://developer.mozilla.org/en-US/docs/Learn/CSS https://developer.mozilla.org/en-US/docs/Learn/CSS [2] https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-en... [3] https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/ https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-f...
  - geokon 8y ago
    These are great. Thanks for the breakdown - the whole webdev space has so much jargon that I probably should take the time to learn a bit of everything through the Mozilla tutorials and then pick up that book once I want some more
- pjmlp 8y ago
  I've got two nice books. https://www.packtpub.com/web-development/professional-css3 https://www.packtpub.com/web-development/professional-css3 https://www.packtpub.com/web-development/responsive-web-design-html5-and-css3 https://www.packtpub.com/web-development/responsive-web-desi...
- teniutza 8y ago
  I'm sure you'll get over the basics pretty quick. After that, check this out http://learnlayout.com/ http://learnlayout.com/.
- vmware508 8y ago
  Don't waste your time... use clever css frameworks and solve the problem on spot... doesn't matter how nice your css code, your colleagues will mess it up quickly... let the intern fix it. ;)
- userbinator 8y ago
  I learned it from the CSS spec, and playing around with a text editor and a browser open. It is very much a "hands on" activity, but if you want to see "the big picture" then the introductory sections of the CSS spec are quite useful.
- Theodores 8y ago
  Now is a really good time to learn. This is because CSS has been done spectacularly badly to date and very few people have taken time to learn how to effectively use much of what has arrived in the last couple of years. Therefore you don't have to learn the bad stuff, you can get stuck in with the better ways of doing it. I have watched the talk that goes with this post and I think that this is useful to better understand where Laura is coming from. She has gone deep reading the code for implementing the 'cascade' and you have to give her credit for getting people talking. However, in the article there is some idea of solving responsiveness. There is a better starting point and it is this - CSS variables. In the olden days people would have one chunk of common CSS and then media queries that would have other chunks of CSS in them. The better way is to only have CSS variables in media queries and then to have all the style declarations use the CSS variables. In this way you can have maintainable CSS where it is clear to see what changes. An example, if you have an image in a figure then you might want it to appear on the right hand side in a desktop layout and full width on mobile. So in the root element of the CSS you can define --my-figure-grid-column as 1 and then in the media query for desktop you can then set the variable to 2. Then in the style rule for the image you can have grid-column: var(--my-figure-grid-column). If you review the code a few months later and decide you want the image on the left you can see what is going on and what you need to change. With old CSS you would probably decide to just bolt yet more style rules to the bottom with !important to hack it good. CSS Grid is a good place to start, this is the new layout engine and it works in 97% of used browsers. If you start from content with sensible HTML5 elements instead of 'div soup' and make it responsive with CSS Grid and CSS variables then you will have as much fun as a kid with LEGO. There are a few other things on starting out, one being to forget about pixels and percentages. Go with ems and 'vh/vw/vmin/vmax' instead. Document structure matters too, if you are using CSS Grid then you don't need the div tags or the spans. You also don't need the clutter of many classes added to every div. So maybe strip your webpage back to bare content, burn the existing CSS and any 'reset.css' type of files that are there for Internet Explorer 6 related reasons. Get the page structured with the HTML tags of header, main, footer, article, section, aside, nav, figure and the ones you know already for doing lists. Then get it looking good on all browsers with CSS Grid with layout problems solved with CSS variables. You can then move on to the more decorative things.
- pault 8y ago
  I learned a lot of CSS early in my career by experimentation, but everything that has been added to the language since css 3 I have learned from MDN, CSS Tricks[0], and the autocomplete in chrome dev tools. [0] https://css-tricks.com/ https://css-tricks.com/
oarabbus_ 8y ago
How about... _not_ writing CSS algorithms? I'm mostly joking, this is neat.
pault 8y ago
Algorithm? I see a design process but using the word algorithm to describe a CSS layout is a bit baffling to me. It's like creating a library of json snippets and calling it a json algorithm.
- tobr 8y ago
  Should have seen it coming after “object oriented CSS”, “functional CSS” and “immutable CSS”, none of which has anything to do with OOP or FP. What’s next? CSS data structures?
  - ivanhoe 8y ago
    While these are really just boilerplate snippets for some common layouts, you can easily have an actual algorithm for CSS, too. For instance complex recipes/tricks for selecting just some of the nodes using different combinations of n-th child and sibling selectors are definitely algorithms, offering very generalized list of steps to follow to implement the logic on any number of elements.
    - pault 8y ago
      I guess I can concede that. If you can compose an algorithm using a flow-based visual programming language I suppose you can consider a series of selectors an algorithm for applying styles, but by that logic every selector is an algorithm.
      - ivanhoe 8y ago
        For me algorithm is simply an explanation/strategy of a list of steps needed to implement some logic and/or solve some problem. IMO it can even be a paper with IKEA instructions how to assemble a desk. Might not seem so, but if you'd tried to program a robot to do it, you'd probably call those steps the desk building algorithm. However I wouldn't call every css selector an algorithm on its own, just like print() function is not an algorithm - but if we have a routine to print say only odd numbers, that is definitely the (very simple) algorithm. Equally if you come up with a recipe how to combine css selectors into a series of rules to select e.g. N particular elements in an arbitrary list of DOM nodes, in my mind it's the full-blown algorithm too. Just my $.02 of course...
dmitriid 8y ago
“Make CSS interesting/here’s a methodology blah blah”.... Sets up SCSS. Can we just agree that current CSS is a mistake and bring more of SCSS into it?
- Brajeshwar 8y ago
  “New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now.” — Håkon Wium Lie, co-creator of CSS.
- atoav 8y ago
  Athough I think CSS could be more than it is, I have never felt any need to use SCSS. Writing a complete new style for a typical blog costs me half a day with clever use of nesting, css variables and such. The pain points usually stem from inconsistencies in browser implementations. Except for missing functionality like not beeing able to select a element who has no child of a given type I never really felt that it took longer than it had to (most of my time goes into deciding the design and not into wrangling with fine details of css). But maybe I should check out SCSS?
  - dmitriid 8y ago
    > with clever use of nesting I don't think CSS Nesting Level 3 is implemented anywhere (it only really got added last year [1]). And there are still ongoing discussions around it (e.g. media-queries [2]). > But maybe I should check out SCSS? Definitely, yes. There are quite a few things that would be wonderful to see in CSS: - better, less verbose syntax for variables - mixins and extends - nesting ... I forget what else, as I haven't done frontend work in a while :) [1] https://github.com/w3c/csswg-drafts/issues/2701#issuecomment-402392212 https://github.com/w3c/csswg-drafts/issues/2701#issuecomment... [2] https://github.com/tabatkins/specs/issues/56 https://github.com/tabatkins/specs/issues/56
    - atoav 8y ago
      Thanks, maybe nesting was the wrong word, I meant inheritance. SCSS nesting is super nice – althoughvone could argue it could be counted as syntactical sugar. Do you have a realtime workflow for scss?
ferros 8y ago
Why does sass have to be ‘compiled’ in 2019? It’s not like some heavy duty compilation is being performed. It should be as standard and supported as css.
- ferros 8y ago
  downvoted, because..? I stand by my statement. JavaScript has progressed, and styling should too.
  - drcongo 8y ago
    I didn't downvote you, but in answer to your question: compiling first means it works without javascript.
  - onomics 8y ago
    Modern JavaScript has progressed.. by compiling in more features. CSS is no different.
- cmg 8y ago
  Interestingly enough, LESS (a similar concept to SASS, though less powerful last time I looked at it) offers a JavaScript component to compile .less files that are included via <link rel="stylesheet/less">, though they do recommend that in production the files be pre-compiled. http://lesscss.org/usage/ http://lesscss.org/usage/
- 52-6F-62 8y ago
  No comment on the core question, but: When I do have to do any web gui work, I'm starting to lean toward Parcel because I can import SCSS/SASS, Less, or CSS right into the javascript/typescript file, and it will spit out web-usable CSS without configuration. Of course this only helps if you're including JS anyway. I don't know enough about the system to know if you can configure for just SASS. But that just returns to your problem, anyway.
runxel 8y ago
What a waste. To quote: «You call throwing dynamite around martial arts?»
darepublic 8y ago
A good general approach to problem solving that is not CSS specific -- prototype something that just works to get familiar with the problem space, then refactor/reiteratively improve the solution.

66 points by skilled 8y ago

I was expecting something along the lines of https://news.ycombinator.com/item?id=10734966 https://news.ycombinator.com/item?id=10734966 or https://news.ycombinator.com/item?id=2300836 https://news.ycombinator.com/item?id=2300836, or a discussion on how to implement CSS in a browser, but this article seems to be really more about "algorithms for writing CSS".

geokon 8y ago

Whats a good place to learn CSS for someone with programming experience? I've been in my low-level C++ world for a long time and am pretty out of touch with GUI/Web things. I was writing some JavaFX code and saw it can be extended with CSS, but I don't know where to start. I'd also like to tweak the CSS on my webpage, but also don't know what's what. What I've found online is targeted towards people starting out coding with Javascript so it's very slow and hands on and doesn't step back and explain the big picture

HillRat 8y ago
Eric Meyer’s CSS books for O’Reilly are unsurprisingly exhaustive. For incremental, hands-on work, try using Codepen to slowly work your way through bounded use cases (e.g., set up a pen and just work on styling buttons, or flex layout, or transforms); Codepen also lets you use preprocessors like SASS and LESS inline, so it’s a great way to get used to the various quirks of CSS and its toolchains without having to set up entire projects.
ibrault 8y ago
+1 to HillRat's answer (especially hacking around in Codepen). On top of his, I want to plug the Mozilla Web Docs [0]. They're absolutely wonderful to reference for all your CSS needs, especially if you learn well from reading the docs. On top of that, they have excellent tutorials as well. I would consider checking out their one on CSS [1], you might find it easier to get through than an O'Reilly book. A little unrelated but as someone who also loves their C++ and low-level programming I really enjoyed Lin Clark's articles on Firefox's Stylo [2] and WebRender [3], I think they do a great job of intuitively explaining the back-end behind CSS rendering, if that's of any interest to you. [0] https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/ [1] https://developer.mozilla.org/en-US/docs/Learn/CSS https://developer.mozilla.org/en-US/docs/Learn/CSS [2] https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-en... [3] https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/ https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-f...
- geokon 8y ago
  These are great. Thanks for the breakdown - the whole webdev space has so much jargon that I probably should take the time to learn a bit of everything through the Mozilla tutorials and then pick up that book once I want some more
pjmlp 8y ago
I've got two nice books. https://www.packtpub.com/web-development/professional-css3 https://www.packtpub.com/web-development/professional-css3 https://www.packtpub.com/web-development/responsive-web-design-html5-and-css3 https://www.packtpub.com/web-development/responsive-web-desi...
teniutza 8y ago
I'm sure you'll get over the basics pretty quick. After that, check this out http://learnlayout.com/ http://learnlayout.com/.
vmware508 8y ago
Don't waste your time... use clever css frameworks and solve the problem on spot... doesn't matter how nice your css code, your colleagues will mess it up quickly... let the intern fix it. ;)
userbinator 8y ago
I learned it from the CSS spec, and playing around with a text editor and a browser open. It is very much a "hands on" activity, but if you want to see "the big picture" then the introductory sections of the CSS spec are quite useful.
Theodores 8y ago
Now is a really good time to learn. This is because CSS has been done spectacularly badly to date and very few people have taken time to learn how to effectively use much of what has arrived in the last couple of years. Therefore you don't have to learn the bad stuff, you can get stuck in with the better ways of doing it. I have watched the talk that goes with this post and I think that this is useful to better understand where Laura is coming from. She has gone deep reading the code for implementing the 'cascade' and you have to give her credit for getting people talking. However, in the article there is some idea of solving responsiveness. There is a better starting point and it is this - CSS variables. In the olden days people would have one chunk of common CSS and then media queries that would have other chunks of CSS in them. The better way is to only have CSS variables in media queries and then to have all the style declarations use the CSS variables. In this way you can have maintainable CSS where it is clear to see what changes. An example, if you have an image in a figure then you might want it to appear on the right hand side in a desktop layout and full width on mobile. So in the root element of the CSS you can define --my-figure-grid-column as 1 and then in the media query for desktop you can then set the variable to 2. Then in the style rule for the image you can have grid-column: var(--my-figure-grid-column). If you review the code a few months later and decide you want the image on the left you can see what is going on and what you need to change. With old CSS you would probably decide to just bolt yet more style rules to the bottom with !important to hack it good. CSS Grid is a good place to start, this is the new layout engine and it works in 97% of used browsers. If you start from content with sensible HTML5 elements instead of 'div soup' and make it responsive with CSS Grid and CSS variables then you will have as much fun as a kid with LEGO. There are a few other things on starting out, one being to forget about pixels and percentages. Go with ems and 'vh/vw/vmin/vmax' instead. Document structure matters too, if you are using CSS Grid then you don't need the div tags or the spans. You also don't need the clutter of many classes added to every div. So maybe strip your webpage back to bare content, burn the existing CSS and any 'reset.css' type of files that are there for Internet Explorer 6 related reasons. Get the page structured with the HTML tags of header, main, footer, article, section, aside, nav, figure and the ones you know already for doing lists. Then get it looking good on all browsers with CSS Grid with layout problems solved with CSS variables. You can then move on to the more decorative things.
pault 8y ago
I learned a lot of CSS early in my career by experimentation, but everything that has been added to the language since css 3 I have learned from MDN, CSS Tricks[0], and the autocomplete in chrome dev tools. [0] https://css-tricks.com/ https://css-tricks.com/

oarabbus_ 8y ago

How about... _not_ writing CSS algorithms? I'm mostly joking, this is neat.

pault 8y ago

Algorithm? I see a design process but using the word algorithm to describe a CSS layout is a bit baffling to me. It's like creating a library of json snippets and calling it a json algorithm.

tobr 8y ago
Should have seen it coming after “object oriented CSS”, “functional CSS” and “immutable CSS”, none of which has anything to do with OOP or FP. What’s next? CSS data structures?
- ivanhoe 8y ago
  While these are really just boilerplate snippets for some common layouts, you can easily have an actual algorithm for CSS, too. For instance complex recipes/tricks for selecting just some of the nodes using different combinations of n-th child and sibling selectors are definitely algorithms, offering very generalized list of steps to follow to implement the logic on any number of elements.
  - pault 8y ago
    I guess I can concede that. If you can compose an algorithm using a flow-based visual programming language I suppose you can consider a series of selectors an algorithm for applying styles, but by that logic every selector is an algorithm.
    - ivanhoe 8y ago
      For me algorithm is simply an explanation/strategy of a list of steps needed to implement some logic and/or solve some problem. IMO it can even be a paper with IKEA instructions how to assemble a desk. Might not seem so, but if you'd tried to program a robot to do it, you'd probably call those steps the desk building algorithm. However I wouldn't call every css selector an algorithm on its own, just like print() function is not an algorithm - but if we have a routine to print say only odd numbers, that is definitely the (very simple) algorithm. Equally if you come up with a recipe how to combine css selectors into a series of rules to select e.g. N particular elements in an arbitrary list of DOM nodes, in my mind it's the full-blown algorithm too. Just my $.02 of course...

dmitriid 8y ago

“Make CSS interesting/here’s a methodology blah blah”.... Sets up SCSS. Can we just agree that current CSS is a mistake and bring more of SCSS into it?

Brajeshwar 8y ago
“New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now.” — Håkon Wium Lie, co-creator of CSS.
atoav 8y ago
Athough I think CSS could be more than it is, I have never felt any need to use SCSS. Writing a complete new style for a typical blog costs me half a day with clever use of nesting, css variables and such. The pain points usually stem from inconsistencies in browser implementations. Except for missing functionality like not beeing able to select a element who has no child of a given type I never really felt that it took longer than it had to (most of my time goes into deciding the design and not into wrangling with fine details of css). But maybe I should check out SCSS?
- dmitriid 8y ago
  > with clever use of nesting I don't think CSS Nesting Level 3 is implemented anywhere (it only really got added last year [1]). And there are still ongoing discussions around it (e.g. media-queries [2]). > But maybe I should check out SCSS? Definitely, yes. There are quite a few things that would be wonderful to see in CSS: - better, less verbose syntax for variables - mixins and extends - nesting ... I forget what else, as I haven't done frontend work in a while :) [1] https://github.com/w3c/csswg-drafts/issues/2701#issuecomment-402392212 https://github.com/w3c/csswg-drafts/issues/2701#issuecomment... [2] https://github.com/tabatkins/specs/issues/56 https://github.com/tabatkins/specs/issues/56
  - atoav 8y ago
    Thanks, maybe nesting was the wrong word, I meant inheritance. SCSS nesting is super nice – althoughvone could argue it could be counted as syntactical sugar. Do you have a realtime workflow for scss?

ferros 8y ago

Why does sass have to be ‘compiled’ in 2019? It’s not like some heavy duty compilation is being performed. It should be as standard and supported as css.

ferros 8y ago
downvoted, because..? I stand by my statement. JavaScript has progressed, and styling should too.
- drcongo 8y ago
  I didn't downvote you, but in answer to your question: compiling first means it works without javascript.
- onomics 8y ago
  Modern JavaScript has progressed.. by compiling in more features. CSS is no different.
cmg 8y ago
Interestingly enough, LESS (a similar concept to SASS, though less powerful last time I looked at it) offers a JavaScript component to compile .less files that are included via <link rel="stylesheet/less">, though they do recommend that in production the files be pre-compiled. http://lesscss.org/usage/ http://lesscss.org/usage/
52-6F-62 8y ago
No comment on the core question, but: When I do have to do any web gui work, I'm starting to lean toward Parcel because I can import SCSS/SASS, Less, or CSS right into the javascript/typescript file, and it will spit out web-usable CSS without configuration. Of course this only helps if you're including JS anyway. I don't know enough about the system to know if you can configure for just SASS. But that just returns to your problem, anyway.

runxel 8y ago

What a waste. To quote: «You call throwing dynamite around martial arts?»

darepublic 8y ago

A good general approach to problem solving that is not CSS specific -- prototype something that just works to get familiar with the problem space, then refactor/reiteratively improve the solution.