Hi! So good to be here! Let's jump right in and answer the question on everyone's mind - What is neurodiversity? Well, traditionally, sociologists and neuroscientists have been classifying people in two broad groups according to their neurocognitive functioning: neurotypical referring to those who adheres to the societal standards of "normal", and neurodivergent for those who diverge substantially from it, such as people in the autistic spectrum disorder, ADHD or dyslexia.
But that's quite a negative way to look at things.
In response to it, the term neurodiversity was coined to refer to the unlimited variation of the human mind.
It's a way to celebrate our differences, instead of seeing anything that moves out of the normal as something that needs to be fixed.
Historically, neurodivergent people have been excluded from the workplace, despite some of them being able to achieve equal or even well above average performance.
You can easily find neurodivergent people with high academic achievements that are yet unable to find work due to the recruitment processes not being well-suited for the particular needs.
Luckily, this has been changing lately as some big companies realize that they can still provide value, not only from a moral, but also from a strictly a business point of view.
I'm talking BIG companies such as Microsoft, IBM or JPMorgan, all of which now have programs aimed at acquiring neurodivergent talent.
But I want to take things one step further and challenge the idea of a neurotypical mind.
Is there really a such a thing? Do all neurotypical people think the same way, or is there diversity among them? Well, I believe the latter is true and we can prove it.
So would you join me for a little online experiment? Close your eyes for a moment and imagine you're o n a beautiful beach.
It's a bright sunny day with perfectly clear skies and a calm sea.
Now open your eyes, and tell us what you saw.
Please join the chat and let's share our experience.
Did you get a picture perfect image, just like you would with your very own eyes? Maybe just a basic blurry one? Or did you think I meant it as a metaphor, and that we were going for some sort of relaxation exercise? Believe it or not, all of those are normal.
I happen to be in the second group.
I can kind of see a very basic blurry image if I really put all my focus into it, but it instantly disappears as soon as anything else comes to mind.
But I'm sure many of you might have had one of the alternate experiences.
So please tell us.
The most notable thing about this experiment is that people in either group don't even know the others exist.
If we get picture perfect images, we tend to believe that everyone else does.
Same thing if we get the blurry one or nothing at all.
A very similar phenomenon can happen with the 'inner monologue' - that thinking or speaking to myself, kind of thing that we usually see in sitcoms and comic books.
Some people can hear their voices in their head while others take it as a metaphor.
Again, please join in the chat and tell us which group you belong to.
Personally, I have a very strong inner monologue and the voice in my head sounds exactly like me, only he speaks English far more fluently.
We can see similar differences in all sorts of ways.
Some people can perfectly recall songs in their heads, even down to full instrumentation in the right key, while others only recall the main melody - usually just the voice or the lead guitar, and others have no such capacity at all.
Some people even think in abstractions, which I can't even begin to comprehend what is that supposed to mean? We all have a primary way of thinking, whether that's visual, abstractions, or verbal.
The very definition of thinking might be a completely different experience between you and me.
And that's the beauty of it.
But what exactly does that mean? Are people in one group somehow smarter than the others? Well, intelligence is traditionally defined as the ability to learn a new task in a shorter span of time, and how complex of a task can you handle? So it doesn't seem like intelligence can explain the difference in thinking stylesf . If anything, it seems to point towards the existence of multiple intelligences, and that's exactly the paradigm I want to focus on today.
In 1983, psychologist Howard Gardner shook the neurosciences world when he proposed the existence of multiple intelligences.
He wrote a set of criteria from which he derived different intelligences modalities, among which we can find: Visual-spatial intelligence, dealing with the spatial judgment and the ability to visualize with the mind's eye.
Linguistic-verbal, dealing with the ability to understand, and reason concepts using words, and more broadly linked to problem solving, pattern recognition, and working memory.
Logical-mathematical, that obviously deals with logic, abstractions, numbers, and critical thinking.
Bodily-kinesthetic, dealing with the ability to control our bodies in a skillful way and musical, interpersonal, and extrapersonal, all of which are pretty self-explanatory.
So which theory is right? Are there multiple intelligences, or just one to rule them all? Well, mainstream psychology recognizes the value of the multiple intelligences theory, but criticizes the appropriation of the term "intelligence", for which they have a much narrower definition of.
Some psychologists will even say that the theory mixes and matches intelligence with skillset groups and even personality traits, but it still provides a useful framework to think about some issues.
So, what am I doing talking psychology at a tech conference? Well, I believe the root of many of our misunderstandings in the industry go far beyond mere differences of opinions into deep psychological territory.
We'll see that for instance, the divide between designers and developers.
I'm sure most of us can sometimes get the feeling that they come from completely different worlds.
Considering their different styles might help us understand the reason.
Designers - as in people that work with graphic tools - rely primarily on visual-spatial intelligence, while programmers usually work with logical mathematical.
Not big surprises there, right? But where exactly does CSS fit in all of this? Some companies put the CSS tasks into the front-end developers, which lately have been dealing mostly with JS-heavy stuff.
Other companies even lure programmers in by boldly claiming: "Our designers make the CSS." At the end of the day, neither group seems to be enjoying it.
Is CSS a design task? Well, it results in a visual representation, but looks an awful lot more like coding, and there are two key differences: graphic design very specifically instructs the final result, while CSS only provides suggestions for the browser, which has the final word in how things are represented.
Graphic design usually deals with known sizes, while designing for the web is essentially designing for an unknown, infinite canvas.
Is a closer to programming then? Is CSS a programming language? Hold it, hold it, cause it's not that simple.
It very much depends on what we understand by 'programming language'.
As Lara Schenk showed us, "CSS is a declarative, domain-specific programming language." So, why would so many people emphatically answer "NO" to the question? Well, people tend to restrict the term to the imperative languages only.
They might be unaware of the broader definition or simply choose the narrow one.
Which is fine, discussing semantics leads nowhere.
To me, CSS is definitely programming, but I want to focus on the other part of the term.
I believe CSS is more of a language than it is programming.
With CSS, we are not really designing the interface, we're describing, telling the browser: "This is how I like things to look and feel".
But it's up to the rendering engine to provide the final result.
It will make the calculations to give each element the right size and set it in the right place, work out how they relate to each other and even adapt them to the different viewport sizes.
Furthermore, it might not truly understand what we meant by something and choose to discard that part, but still do its best to keep the rest of our conversation going.
We can see browser compatibility as if speaking with someone with different levels of CSS vocabulary.
CSS is highly contextual, and so is almost every spoken language out there.
Consider this word, for example.
Without context, we can't even begin to comprehend what that's supposed to mean.
Actually, we can't really be sure how to pronounce it.
Is it lead as in: 'being in the lead - in the best position in the race? Maybe it's lead, the toxic radioactive metal we used to have in our house's plumbing? Maybe it's not even meant as a noun, but as an adjective, as in lead developer, meaning you're in charge of the group? Or maybe as one of the 40 different ways it's used as a verb.
Now, consider this CSS declaration.
We can infer that the author wants the element would be able to grow, but exactly how much? Well, we can't be sure, at least not until we consider the other properties being applied to the element and its relationship to its parent, siblings, and descendants.
It might even mean nothing at all if the parent is not a flex container.
Another aspect of CSS that bears a resemblance to a spoken language is the use of a defined grammar.
You have to put the words in the correct order to know which role each word is playing in a sentence.
There various grammar-like structures in CSS.
Of course we have the structures of CSS rules and declarations themselves, but there's also source order as the last element of the CSS cascade, or even the non-issue of order in the HTML class attribute, which is a tricky question that pops up at tech twitter every couple of months, and it still gets incorrectly answered by the vast majority of people.
You might think that JS has some of these too, and you're absolutely right.
There's a good reason why every JS interview ever asks about: "What's the meaning of "this", hoisting, and closures.
Well, things in CSS get to a whole other level.
We have stacking contexts ruling how things are represented in the Z-axis, formatting contexts ruling float containment and margin collapse, containing blocks for positioned elements, writing mode, a whole bunch of "@"rules, and of course, the dreaded topics of origin, inheritance, specificity, and the cascade.
All of this creates a very complex and rich language where declarations (that is, property-value pairs) work as the words that compound with the various contexts to create proper sentences describing the interface.
And just like in spoken languages, sometimes words are not used for their literal meaning, but as part of idioms - that is - a group of words established by usage as having a meaning not deducible from those of the individual words.
For instance, the first thing that I tweeted when I found out that I was speaking here was: "I'm over the moon about it." And I'm sure no one thought that went any further than Neil Armstrong.
Well, CSS has similar expressions too.
For instance, consider this code.
If you've been CSSing for a while, you will immediately recognize that I don't really want to create an empty pseudoelement that behaves like a table, I just want to fix the issues derived from using floats for layouts, something they were never designed to do in the first place.
A more modern example will be a code like this, where I don't really mean for the descendant to behave like a flex item, I just want to center it in both axes.
A beautiful thing about spoken languages is that they can tell the story of their people.
Sometimes, we find different words with the same meaning, maybe with some nuance, introduced by immigration waves, conquest or simple borrowing from other languages.
For instance, consider the words "pig" and "pork".
Nowadays, they are used to refer to the animal and its meat, but for centuries, they were just two different words for exactly the same thing.
This goes back to the mixing of French and Anglo-Saxan terms during the Norman conquest of England.
Pig was the Anglo-Saxan term, while pork came from the French "porc", which in turn came from the Latin "porco".
Well, in CSS, we have quite a few things that work in a similar way.
Consider, for instance, how gaps work kinda like what margins used to do in the era of float based layouts.
And I said "kinda like" because we can even use both at the same time.
Or since we're talking margins, consider how the "immigration wave" of logical layouts brought with them terms like "margin-block-start, which may or may not mean exactly the same thing as "margin-top", depending on the writing-mode context.
Same thing happens for instance with flexbox, where "flex-basis" may mean the same thing as width, or not.
Every new CSS module comes with a few extra words in them, but they don't live in isolation.
Some might come with a new module and then be introduced into pre-existing ones, just like the gap property was introduced with grid and then found its way into flexbox.
CSS is a living language.
I could go on for days on this, but I think I made my point already...
so let's get back to the original question: Where does exactly CSS fits in all of this? Is it closer to the visual-spatial nature of design or to the logical-mathematical aspect of programming? Well, there's a bit of both for sure.
When we're dealing with CSS art, we might be getting more into the visual-spatial aspect.
And when we see those amazing procedurally created 3D stuff that people like Ana Tudor creates, we might be tapping more into the logical-mathematical aspect, but for the most part, when it comes to declaring the layout and the styles of our web sites and apps, I believe CSS relies primarily on verbal-linguistic intelligence.
And that's why both designers and developers can find it so hard.
For the most part when it comes to the layout and styles of our websites and apps, I believe CSS relies primarily on verbal-linguistic intelligence.
And that's why both designers and developers can struggle with it.
So what's the best way to learn CSS? Approach it as you would a second spoken language.
We're going to go through some of the techniques that you can use to finally make CSS click in place, from worst to best: We can decide not to even try to learn it, and just rely on a translator, which in the case of CSS is roughly equivalent to relying on a framework.
Language translators have become a gazillion times better than they used to be, but they are still far behind a human when it comes to understanding context.
Just consider this simple example: Recognize those lyrics? No? Well those are the lyrics for Africa by Toto, after a whole bunch of google translates.
But, if you didn't really know the language, could you fix it? A very similar thing is happening with the popularity of CSS frameworks.
They allow for incredibly fast prototyping, but they are one of the main reasons why all websites look the same and the moment that you try to step out of their constraints, you probably won't even know where to start, not to mention you'll be fighting a specificity war like you've never seen before.
If you like traveling and languages as much as I do, you might find yourself trying to learn at least some phrases in the language used at your destinations.
Maybe you're going to France and want to learn enough French to say "hello", "thanks", maybe order coffee, that kind of stuff.
Maybe you can even take it one step further and learn how to properly pronounce croissant or pain au chocolat, cause I'm sure I would like to order some of those, but the moment you enter the pâtisserie, your world would collapse before an incredible assortment of delicious treats that you have no idea how to order.
Of course, this approach is miles away from giving us enough command of the language to hold a proper conversation.
A crash course only leads to...
crash, and that is another reason for this whole "CSS Sucks" stuff.
Coding boot camps and courses everywhere are brushing over CSS to get you as fast as possible to the JS heavy part, as that's where most of the demand from the industry is.
What worries me the most is seeing so many people forever stuck in the crash course approach.
I would dare to say that most people that speak badly of CSS are actually trying to understand it, putting hour after hour learning a ginormous and ever-growing list of properties and values, only to find out that they still can't achieve fluency, which obviously leads to frustration.
But no one has ever learned any language by reading the dictionary only.
We need to understand how words relate to each other, the very nature of our language structure.
And that's where the teaching of CSS usually falls short.
So instead of fighting collapsing margins and clearing floats, try learning formatting context.
Instead of fighting unexpected sizes, learn the box model, and particularly the difference between the intrinsic and extrinsic models.
Get into a definition of inline and block directions as that will obviously help with understanding logical properties, but also can come in handy to learn about any display mode.
Learn the basic units, functions, the resilience of CSS, and do your best to truly understand the cascade - the "C" in CSS - instead of blindly following advice to keep a plain specificity and avoid !Important at all costs.
Tutorials, guides, cheat sheets...
they all have their place, but they are always a simplification pre-interpeted by somebody else.
So whenever you're learning a new CSS module, do yourself a favor and dive into the specifications and MDN.
Feel free to go deeper into the links if you can't quite understand something.
The specifications are incredibly rich and well-written.
They can get too complex sometimes, but I can guarantee you will learn more in an hour diving into the specs than in a month of the "quick results" tutorials.
Practice makes perfect...
or well, at least makes proficient.
Try to re-style your personal website and maybe sign up to the online resources such as daily UI or the CodePen Challenges that will consistently present you with new ideas to develop your CSS skills in ways similar to what you would use in production.
As for those lists of properties values, there's nothing wrong with expanding your CSS vocabulary, but that should be done after you've got the concepts right.
If you truly understand how blending works, you can get away with not knowing every last one of the possible values.
A language only stays with you if you use it.
I've studied Gernam for five years, got proficient enough to keep up a conversation, but never really used it in the last 15 years or so.
Nowadays I can remember some loose words, but would really struggle to read anything, and I wouldn't even know where to start if I had to speak with somebody.
On the other hand, I never formally studied English, but I'm exposed to it every single day.
Sure, you can tell it's not perfect yet (I'm working on it) but I feel confident enough to write and speak.
So try expanding your social sphere to include more CSS people! You'll find ways to use CSS that you could never come up with on your own, and even get to know new words way before they're actually impletmented.
Which by the way, is happening crazily fast lately, so better catch up.
Alternatively, you can hire an interpreter.
Look, there's no shame in that.
Even presidents and prime ministers are joined by interpreters at international summits, even if they know the language decently well.
Sometimes, you need a true expert to translate with the required clarity.
And in this case, it shouldn't be any different.
You shouldn't feel obliged to learn CSS.
You might still find it out of your scope, lack interest, or simply cannot wrap your mind around its linguistic nature.
That's perfectly fine.
You're great at other specialties.
Some people are great at design, some are great at programming, and some are great at CSS.
There are a few that really shine in two of those, and even the occasional unicorn that masters all three.
To me, CSS comes as easy as JS programming, but I couldn't design anything if my life depended on it.
Luckily, every team I've ever worked with had a designer that brilliantly took care of that.
So, why are we forcing designers and developers to do CSS instead of recognizing the value of a third role, and pushing to integrate somebody else into the team? As we just saw, CSS might not only require a different mindset, but a completely different mind.
So we should do whatever is in our reach to include more diverse people into our team.
Neurodivergent people might require some accommodation, but they can prove to be an incredible asset for the team and have a great impact in our projects.
And so-called "neurotypical" people with a different way of thinking than ours can be the key to help us through the tasks that we find more difficult or straight up impossible.
So I'd like to wrap this up by encouraging you to do whatever is in your reach to include them.
Maybe you can chip in simply by recognizing the value of their expertise or helping them grow their following.
Or maybe you are in a position to suggest to the higher ups to reform some aspects of their talent acquisition programs, or create a new role for an expert in something that your team is lacking.
At the end of the day, I can guarantee you will greatly benefit your workflow, your company, and your projects.
Celebrate diversity! Thanks!
