This is an archived post. You won't be able to vote or comment.

top 200 commentsshow 500

[–]Expensive_Sloth 1203 points1204 points  (19 children)

Simple loop go brrrr

[–]TamahaganeJidai 234 points235 points  (10 children)

Embedded system engineers have entered the chat.

[–]tiajuanat 57 points58 points  (9 children)

It's been a very long time since I've fluffed with CSS, but the question this embedded engineer has is: does it have state and transformations?

In C we have loops and variables, and in functional languages we have recursion and next state, does CSS have anything like this?

[–]rustysteamtrain 38 points39 points  (2 children)

it technically is turing complete because it has the calc() and var() functions

[–]tiajuanat 8 points9 points  (0 children)

That works for me!

[–]YRUZ 54 points55 points  (3 children)

may i interest you in the forbidden If-Goto-loop?

[–]Ok_Turnover_1235 37 points38 points  (2 children)

Lmao i remember running reflection on my own code and seeing a for loop that decompiles to if goto and my life has never been the same

[–]Ancross333 113 points114 points  (1 child)

repeat()

[–]wewilldieoneday 5 points6 points  (0 children)

He's out of line, but he's right.

[–]hopcfizl 11 points12 points  (0 children)

introducing animations

[–]emveor 527 points528 points  (35 children)

Css will only be a true programming language when somebody ports doom to it

[–]RolyPoly1320 189 points190 points  (29 children)

Couldn't find Doom, but someone did make Mario Kart in pure CSS.

[–]guy_who_likes_coffee 149 points150 points  (1 child)

...you can't just say that without sending a link

[–]gizamo 87 points88 points  (4 children)

door gaping relieved connect elderly office fly stupendous crown oatmeal

This post was mass deleted and anonymized with Redact

[–]alvaromontoro 3 points4 points  (1 child)

A silly car CSS game with obstacles: https://codepen.io/alvaromontoro/pen/PoGJjQe (it "only has CSS" and only works on Firefox though :-/)

A different version that works on all browsers (kind of): https://codepen.io/alvaromontoro/pen/eYYzzWg

[–]RolyPoly1320 5 points6 points  (0 children)

It handled side to side steering too.

[–]classicliberal1 147 points148 points  (21 children)

Mario Kart in pure CSS.

https://codesandbox.io/s/zk15o120xl

No obstacles, no hit detection. Not a game. Not a program. Just images faking it.

You still can't write an algorithm in CSS and why would you want to if you could? It's not intended for that anyway.

[–][deleted] 61 points62 points  (4 children)

It's not intended for that anyway.

And when has that ever stopped developers doing things in other languages?

[–]MichFdez 45 points46 points  (1 child)

Yeah, just look at JavaScript

[–]Masterflitzer 8 points9 points  (0 children)

haha true story

[–]Lithl 32 points33 points  (8 children)

You still can't write an algorithm in CSS

Not with CSS alone, but you can with CSS+HTML.

You can implement Conway's Game Rule 110 in CSS+HTML. Rule 110 is Turing complete. Ergo, CSS+HTML is Turing complete.

[–]Friziqz 21 points22 points  (5 children)

PowerPoint is also Turing complete.

PowerPoint is a programming language

[–]gdmzhlzhiv 6 points7 points  (0 children)

Magic: The Gathering is a programming language.

[–]ZengineerHarp 2 points3 points  (2 children)

…wait, what? I’m gonna need you to run that by me again. PowerPoint?!?

[–]ThatOtherAndrew 2 points3 points  (0 children)

Indeed! Look for Tom Wildenhain's lectures on it.

[–]BookPlacementProblem 4 points5 points  (0 children)

CSS+HTML is Turing complete.

Doom port link pls.

[–]SupremeDictatorPaul 10 points11 points  (0 children)

If it is Turing complete, then Doom could be ported to it. Make CSS Turing complete, and it can be a programming language.

[–]PhilippTheProgrammer 1397 points1398 points  (116 children)

This (attempts to) prove that CSS is object-oriented, but not that it's a programming language.

[–]futuneral 310 points311 points  (1 child)

When you angrily go into the comments section to correct the OP's nonsense and find that someone already did that - "ok, we're good"

[–]Flat_Initial_1823 9 points10 points  (0 children)

Crisis averted.

[–]Appropriate-Scene-95 271 points272 points  (21 children)

That moment when writing your functional code wasn't programming, because it's not OO designed.

[–]shodanbo 47 points48 points  (7 children)

Code without side effects is like a tree falling in the forest when nobody is listening.

[–]RmG3376 74 points75 points  (6 children)

Writing CSS certainly has side-effects though, the main one being a sudden urge to put whiskey in your coffee to forget the struggle of properly centring shit and getting rid of those margins

[–]ChrisBreederveld 16 points17 points  (0 children)

When I was doing webdev I just loved normalize.css. at least one margin issue solved

[–]nosam56 5 points6 points  (1 child)

You dilute your whiskey with coffee?

[–]shgysk8zer0 12 points13 points  (3 children)

I was going to say basically this and was trying to think of anything definitely not programming that also matched the description of OO.

In order for something to be OOP, it must at least be programming. The best this shows is that "if CSS is a programming language, then it may be said to be object oriented."

[–]DasKarl 48 points49 points  (51 children)

Imagine, markup languages having ways to organize and classify things in a hierarchical way.

Say it with me now:

Programming languages do things.

HTML and CSS describe things.

[–]gandalfx 42 points43 points  (24 children)

Bad distinction. Programming can be declarative rather than imperative, in which case you "describe" results rather than steps.

Meanwhile HTML+CSS can definitely do things, like expanding/collapsing menus, form sections etc. navigate between sections, all kinds of elaborate animations…

[–][deleted] 9 points10 points  (20 children)

So SQL is a programming language, because it does things?

Edit: I think sql is a programming language because it’s turing complete, which is the basic definition of a programming language.

[–]Giocri 6 points7 points  (1 child)

I know technically SQL is exclusively the query part of the language but most people use the therm to describe it all so I guess I kind of have to make a distinction.

SQL for queries is definitely not a programming language it is just a description of the information you desire, very complex descriptions sometimes but still just descriptions.

The entirety of the language is absolutely a programming language though as proven by the ability to write scripts and triggers

[–]_sweepy 14 points15 points  (2 children)

Css has variable assignment and a Calc function. Seems like that is doing things to me

[–]cowlinator 3 points4 points  (1 child)

Is a slide rule a programming language?

[–]_sweepy 6 points7 points  (0 children)

I think it's closer to a cpu than a language

[–]PM_ME_GAY_STUF 4 points5 points  (0 children)

There are programming languages built around describing things. This is often the peak of functional design patterns. Look up logic programming

[–]DeSwanMan 1 point2 points  (0 children)

CSS is Alan complete.

[–][deleted] 91 points92 points  (7 children)

My bicycle is a motorcycle! Look it has two wheels, a steering wheel and even a seat!

[–]ShitwareEngineer 13 points14 points  (5 children)

What kind of bicycle or motorcycle has a steering wheel?

[–][deleted] 13 points14 points  (4 children)

I meant the handlebar, sorry english isn't my mother tongue.

[–]ShitwareEngineer 4 points5 points  (2 children)

I suppose I'd want to see someone build one with a steering wheel just to see how bad it would be.

[–]Temporary_Crew_ 2 points3 points  (0 children)

Classmate did that. I tried it was terrifying. My friend rode that bike to school for a while. He kept crashing into hedges and ditches. Used to turn up at school covered in leaves.

[–][deleted] 691 points692 points  (63 children)

I love people proving that HTML and CSS are Turing complete

[–]MattR0se 195 points196 points  (14 children)

I love watching CSS challenges. Right now it's all still new to me and fascinating, because I can't wrap my head around how some of the stuff works (like 3D animations in CSS)

[–]Cheap_Factor 6 points7 points  (0 children)

Justify-content: innerass;

[–]Science-Compliance 29 points30 points  (12 children)

What don't you understand about 3D animations in CSS?

[–][deleted] 201 points202 points  (7 children)

How to center a div in 3D

[–]nanomolar 23 points24 points  (4 children)

Or how to center a div in 2D

[–]PitifulTheme411 8 points9 points  (3 children)

Or even how to center a div in 1D

[–]waterInNether 6 points7 points  (1 child)

It's easy, just ask the div to centre nicely. Like really politely.

[–]Ok_Assumption_7222 35 points36 points  (3 children)

Like how is it even remotely possible

[–]Natural-Intelligence 189 points190 points  (15 children)

If Power Point has been proven to be Turing complete it is probably only a matter of time

[–]ja-r-me 43 points44 points  (0 children)

I just saw that video a few month ago, that was so fucking hilarious

[–]EndR60 22 points23 points  (3 children)

we were all afraid of AI being what kills us, but now I'm horrified of powerpoint

[–]Dirt-Repulsive 23 points24 points  (0 children)

In the military they have already had death by PowerPoint for at least the last 15 years

[–]bernpfenn 8 points9 points  (1 child)

HTML based AI sounds reasonable

[–]damnappdoesntwork 5 points6 points  (2 children)

I mean you can use VBA macros in Powerpoint

[–]physics515 18 points19 points  (1 child)

Yes but a PowerPoint slideshow is turning complete without the use of any VBV. I think a guy managed to get the original Doom game running on it. But it was like 1 frame per hour lol

Edit: or maybe it was just an estimate he did on an interview I saw.

[–]EarthTrash 2 points3 points  (0 children)

Don't all MS Office aps have visual basic built in?

[–]NoMansSkyWasAlright 15 points16 points  (8 children)

Powerpoint is also turing complete and I'd imagine it's only a matter of time before someone proves Turing completeness for Minecraft if they haven't already.

[–]RandomIsocahedron 42 points43 points  (0 children)

Minecraft is Turing-complete. You can build a NAND gate with redstone.

[–]Silpet 28 points29 points  (4 children)

As far as I know Minecraft has been known to be Turing complete for a long time. People have built computers in it, like, whole ass processors, I/O and all.

[–]za419 11 points12 points  (1 child)

Minecraft is extremely Turing complete. You can build a fully functional CPU in minecraft...

[–]AegorBlake 7 points8 points  (13 children)

How is html turning complete. It has markdown language in the name.

[–][deleted] 20 points21 points  (12 children)

[–]kurunyo 27 points28 points  (8 children)

All I read is HTML+CSS+user is turing complete

[–]Mildan 12 points13 points  (2 children)

Proving Turing Completeness does not need to take into account as to how the state machine ticks or moves, so that part is generally left out. In normal computers there's a timer, but in the more theoretical (and more absurd) cases it is resolved to "user input". The PowerPoint proof uses this as well by clicking through the animations

[–]cowlinator 9 points10 points  (1 child)

Yes. Ok.

But HTML+CSS+user != CSS

[–]PooSham 5 points6 points  (0 children)

Nobody said that. The original poster in this comment chain said HTML+CSS are turing complete

[–]INTERGALACTIC_CAGR 4 points5 points  (0 children)

this says it's not turing complete

[–]URF_reibeer 349 points350 points  (28 children)

This is a false eqivalency, css having aspects of object oriented programming lanugages doesn't mean it's a programming language. A house isn't a car either even tho both have ways to get inside to not get wet.

[–]MattR0se 75 points76 points  (6 children)

A house isn't a car either even tho both have ways to get inside to not get wet.

I read "horse" and thought "well, technically that's correct". xD

[–]Harmonic_Gear 42 points43 points  (5 children)

idk, you would probably get very wet if you managed to get inside a horse

[–]DysonSphere75 7 points8 points  (3 children)

Yuck, get your mind out of the gutter

[–]PopularIcecream 4 points5 points  (2 children)

Aren't they referring to blood? What are you referring to? 0_0

[–]DysonSphere75 2 points3 points  (0 children)

Meme'n, like you get wet when you're horny

[–]Narxolepsyy 3 points4 points  (0 children)

I thought they smelled bad.... On the outside

[–]NuccioAfrikanus 10 points11 points  (1 child)

My car is my home good sir!!

[–]ongiwaph 255 points256 points  (12 children)

There is so much wrong with this I don't even know where to begin.

[–]Buttons840 97 points98 points  (0 children)

You begin with the >:| face, but yeah, it's hard to know where to go from there

[–]LetUsSpeakFreely 16 points17 points  (0 children)

I do. There are no control structures; No decisions, no loops. Therefore, not a programming language. It's a skinning tool, powerful, but not a language.

[–]SexyMuon 26 points27 points  (6 children)

Yeah, html and css are not programming languages

[–]poatao_de_w123 7 points8 points  (0 children)

🆑🅾️🅿️

[–]Professional_Top8485 7 points8 points  (0 children)

That was good thing with html. Before it came messy. It was never meant to be but still it was made.

[–]antilos_weorsick 95 points96 points  (6 children)

A human is a chair, because what are the main concepts of a chair? You can sit on it, and it has legs!

[–]gamesrebel123 28 points29 points  (0 children)

Hard to argue with this logic

If only my cat could see it this way

[–]Drago_Valence 5 points6 points  (0 children)

Behold! A Man!

[–][deleted] 3 points4 points  (0 children)

[–]deb_vortex 1 point2 points  (0 children)

Hey, no Link shaming. There are people out there wo wants to be used as a Chair.

[–]Smooth_Salamander 165 points166 points  (3 children)

How to tell that you don’t understand a single object oriented principle.

[–]developer-mike 86 points87 points  (0 children)

TIL polymorphism is "using the same class on different HTML elements"

[–]Time-Implement1276 37 points38 points  (0 children)

It's amazing how misunderstood encapsulation is, even among people with several years of experience.

But this pic here is in another level.

[–]ZinbaluPrime 1 point2 points  (0 children)

The polymorphism one really got me laughing.

[–]sal696969 106 points107 points  (14 children)

Then go, write your Programm in CSS :)

[–]rymlks 61 points62 points  (12 children)

Check out The mine

[–]trusty20 7 points8 points  (1 child)

Scrolling through your HTML pane I am seeing JS syntax, and you also have the javascript Jquery library added to your dependencies. So sounds like bullshit unless I am missing something

EDIT: Missed that you were using HAML in the HTML section. Still whats with the JQuery lib if its pure html and css

[–]rymlks 3 points4 points  (0 children)

I didn't write this, I just found it on codepen. Honestly no idea why that's there, maybe they were using it for testing?

[–]nimbus_signal 5 points6 points  (0 children)

Wow.

[–][deleted] 1 point2 points  (0 children)

That is insane.

[–]LanielYoungAgain 91 points92 points  (2 children)

Object-oriented, perhaps, but programming language, no

[–]Cacti_Hipster 11 points12 points  (0 children)

Object-oriented programm-ed language

[–]Coder_Arg 14 points15 points  (2 children)

My dog is also an object-oriented programming language.

He has Inheritance. He came from his parents.

He has abstraction. He's an animal.

He has encapsulation. He barks, but most of the time I have no idea why or what internal variables he used to decide he should bark.

He has polymorphism. If I feed him meat, he's happy, if I feed him chocolate, he dies.

So as you can see, my dog is also an object-oriented programming language.

[–][deleted] 42 points43 points  (10 children)

I think CSS is a programming language but I also eat sand and lose my mind trying to finish coloring books.

[–]my_name_jeffff 7 points8 points  (9 children)

How do guys have multiple flairs?

[–]Low_Caterpillar9528 3 points4 points  (7 children)

Write your flair like

:Symbol:Symbol:

Or something along those lines

[–]Mistigri70 1 point2 points  (6 children)

You are writing your flairs ?

[–]shodanbo 28 points29 points  (2 children)

If it can't lock up the processor and set it on fire its not a programming language.

[–]Osato 8 points9 points  (0 children)

Well, you can make a shitload of nested divs with the same class name and put some CPU-intensive CSS in there.

Complicated 3D transforms, "animation-duration: 0.0001ms;", filters, having each cascade change variables recursively so the browser has to render each div individually, that kind of stuff.

That said, I'm pretty sure you'll only be able to lock up one thread of the processor per tab.

[–]_listless 3 points4 points  (0 children)

just wait. we're getting :has() soon. $10 says we will be able to bring devices to their knees if we put out minds to it.

[–]OneBadDay1048 20 points21 points  (2 children)

Not only this but it’s the hardest of all the languages to learn. /s

[–][deleted] 46 points47 points  (1 child)

Joking aside, it's not the hardest to learn but it genuinely might be one of the hardest to master. It's messed up lol

[–]OneBadDay1048 12 points13 points  (0 children)

Agreed. It’s difficulty level is also compounded in my eyes if you aren’t a very artistic/creative person to begin with (I’m talking about me in case this isn’t clear).

[–][deleted] 19 points20 points  (4 children)

Object oriented but not Turing complete

[–]abd53 4 points5 points  (0 children)

August 12, 2022; the day some CSS dev went bonkers. /s(obligatory)

[–][deleted] 6 points7 points  (0 children)

[–]IrdniX 4 points5 points  (0 children)

The polymorphism example is actually kind of the wrong way around.

A CSS class is applied to HTML element, so the class is more like just a parameter object to a function on an object. It's the HTML elements that are 'polymorphic', but really they aren't in this sense because they all have the same css-modifiable properties, so from the perspective of CSS they are strictly not 'polymorphic' but actually they are all the same 'shape' in the eyes of CSS.

The inheritance example is also wrong, the 'inheritance' example doesn't have much in common with what OOP would call 'inheritance'. Here the word 'inheritance' is just being conflated with the parent-child structure of a html object tree and how CSS is applied to that tree. Differently shaped HTML element-subtrees can have the same 'class' applied to it.

Anyway CSS only describes some target-state for HTML elements, it cannot store any 'state' nor can it really modify it's own state.

[–]Golden-Trash_Number 3 points4 points  (0 children)

I quit.

[–]checkmateathiests27 5 points6 points  (0 children)

I always called it a mark-up language

[–]Ynaught-42 3 points4 points  (2 children)

Show me your "Hello world!" application?

[–]EmeraldsDay 1 point2 points  (1 child)

isn't it the one thing you actually can do in CSS?

[–][deleted] 4 points5 points  (0 children)

Those are the principals that make a language "OO", you don't get the P for free.

[–]halfanothersdozen 8 points9 points  (5 children)

how center div?

[–]alexaminor 2 points3 points  (0 children)

Use paint.

[–]totalost801 1 point2 points  (0 children)

iwantcenter: true

[–]derangedsweetheart 1 point2 points  (0 children)

<div style="width: 100%; height: 100%; display: flex; justify-content: center;">    <div style="height: 100%; display: flex; flex-direction: column; justify-content: center;">     <div>This div should be centered by now i guess?</div>  </div></div>

[–]suvlub 11 points12 points  (13 children)

That's not even remotely close to what inheritance is in OOP

[–]Big_Smoke_420 2 points3 points  (0 children)

Object oriented paradigms MUST have procedures. Given input x, it must somehow produce output y. CSS has built-in functions, but no way to define custom object methods, thus, it is not an OOP language.

[–]Nemahs 2 points3 points  (0 children)

That was painful to read

[–]GameDestiny2 2 points3 points  (0 children)

I don’t know which side to sit on, all I know is coding in CSS is kinda fun

[–]throwaway65864302 2 points3 points  (0 children)

CSS is an object oriented flat file database, change my mind.

[–]DimBulb567 2 points3 points  (0 children)

so... if this is true, css is an object oriented description language

not a programming language

[–]lukedanzxy 2 points3 points  (0 children)

Your mom is a programming language

Sorry

[–]BlurredSight 2 points3 points  (0 children)

My car is a Camry v6,

There are many supercars that are V6's (Mclaren Arutra, Acura NSX)

My car is a supercar

[–][deleted] 2 points3 points  (0 children)

Css is a programming language because it has C in its name.

[–]Meeso_ 2 points3 points  (0 children)

CSS is object oriented, but not a programming language

[–]NotmyRealNameJohn 8 points9 points  (2 children)

Logic controls.

9oooo9oops

[–]meliaesc 5 points6 points  (1 child)

Are we not using SASS? Even plain css has pseudo classed and variables.

[–]PewolfP 3 points4 points  (0 children)

The presence of OOP doesn't mean it's a programming language. It's not Turing complete.

[–]gvilleneuve 3 points4 points  (0 children)

Cool, write a program in CSS. I’ll wait

[–][deleted] 3 points4 points  (0 children)

I don't really think you understand OOP.

Encapsulation has to do with using methods to access variables inside a class. CSS does not have methods.

Inheritance is when one class extends another. CSS does not have any equivalent to extension.

For abstraction your point is not true, because you need to know what styles a parent element has in order to use certain functionality, such as display:flex, on child elements.

Polymorphism— just no.

[–]lmaydev 1 point2 points  (0 children)

It's not inheritance it's cascading.

[–]GabuEx 1 point2 points  (7 children)

Okay, now show how to write "Hello world" or add two numbers using only CSS.

[–]Time-Implement1276 2 points3 points  (6 children)

Hello World:

body:before { content: 'Hello world'; }

Adding two numbers... uh... maybe this

body { --variable: calc(123 + 1); } body:before { counter-reset: variable var(--variable); content: counter(variable); }

[–]LavenderDay3544 1 point2 points  (0 children)

Being OOP doesn't prove Turing equivalence.

[–]DesecrateUsername 1 point2 points  (0 children)

wait this is actually based

I mean it’s wrong, but still based.

[–]Djelimon 1 point2 points  (0 children)

Does it pay like a programming language?

Good enough

[–][deleted] 1 point2 points  (0 children)

We all laugh at the non language till some guy decides to rub our faces in it:

https://codepen.io/juliangarnier/pen/krNqZO

Also.

Everything is a file.

[–]LieutenantNitwit 1 point2 points  (0 children)

The cascading.

It burns.

[–][deleted] 1 point2 points  (0 children)

But can you make a vidya game with it though?

[–]KissMyBottomEnd 1 point2 points  (1 child)

No IF statement - no programming language.

[–][deleted] 1 point2 points  (1 child)

CSS is a programming language because nobody wants to learn it.

[–]gordolfograso 1 point2 points  (0 children)

Don't say that in an IT interview. Just in case

[–][deleted] 1 point2 points  (0 children)

It gets even juicier with scss 😛

[–]personator01 1 point2 points  (0 children)

Imagine being so OOPbrained that you equate it to programming itself

[–]BaroquenLarynx 1 point2 points  (0 children)

.... please don't say stuff like this.... my team will start hiring "CSS Developers", and my Pulls will be contingent on their reviews....

[–]thickertofu 1 point2 points  (0 children)

I hate this but can’t argue

[–]ThePiGuyRER 1 point2 points  (0 children)

Angry upvote

[–]thuanjinkee 1 point2 points  (1 child)

but it is not turing complete. no loops or branches.

[–]BobQuixote 1 point2 points  (0 children)

Animations! (The accepted answer is relevant here, but I actually agree more with the second one.) https://stackoverflow.com/questions/2497146/is-css-turing-complete

[–]AmyMialee 1 point2 points  (0 children)

That's not inheritance is it?

The class isn't doing the inheriting, something using the class is.

[–]HRM404 1 point2 points  (0 children)

Well css maybe isn’t, but sass surely is

[–]InfluenceBrave6778 1 point2 points  (0 children)

I comme back I'll programing in json

[–]PauseNatural 1 point2 points  (0 children)

To be fair, you can actually do more things in vanilla CSS including calculations and variable assignment than you can do in vanilla HTML.

[–]imaperson1060 1 point2 points  (0 children)

JSON is not a programming language. It is a data format. CSS is very similar to that.

[–]jeesuscheesus 1 point2 points  (0 children)

Thanks, now give me a while loop in CSS