
Writing CSS Algorithms - skilled
https://notlaura.com/writing-css-algorithms/
======
pault
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
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
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
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
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...

------
geokon
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

~~~
ibrault
+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-
en...](https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-
quantum-css-aka-stylo/)

[3] [https://hacks.mozilla.org/2017/10/the-whole-web-at-
maximum-f...](https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-
how-webrender-gets-rid-of-jank/)

~~~
geokon
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

------
userbinator
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".

------
darepublic
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.

------
runxel
What a waste.

To quote: «You call throwing dynamite around martial arts?»

------
oarabbus_
How about... _not_ writing CSS algorithms?

I'm mostly joking, this is neat.

------
ferros
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
downvoted, because..?

I stand by my statement. JavaScript has progressed, and styling should too.

~~~
onomics
Modern JavaScript has progressed.. by compiling in more features. CSS is no
different.

------
dmitriid
“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?

~~~
atoav
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
> 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...](https://github.com/w3c/csswg-
drafts/issues/2701#issuecomment-402392212)

[2]
[https://github.com/tabatkins/specs/issues/56](https://github.com/tabatkins/specs/issues/56)

~~~
atoav
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?

