adamsilver/maintainablecss.com-jekyll

Question on human understanding

Closed this issue · 10 comments

mrmrs commented

Do you have any data or academic research that can support this statement?

This is because humans are good at understanding human communication and bad at understanding abbreviated, non-semantic abstractions.

Seems like unix systems have done quite well with abbreviations e.g the command for copy is cp, the command for move is mv.

adamsilver commented

@mrmrs I have no academic research for this. Just experience in life, working with people and being a human myself :)

It's a lot easier to understand a word without thought, when the word is just the word, rather than a cut down word.

If I asked someone new to Unix what cp means I doubt they would say copy, and even if they did, they still had to mentally map that.

Then if I said to them just before introducing them to cp, that cd means change directory, I bet they would then think that c is a word and p is a word too.

Either way it's pretty obvious (to me at least) that move is much clearer than mv.

HTH :)

  • 👍3
equinusocio commented

what is sm-2? margin 2px on small devices? 2px small-margins? shadows-small?

  • 😄1
mrmrs commented

@equinusocio @adamsilver This seems like a strawman argument. How do you know what any class is looking up its definition?
Using a content-semantic derived class name like <div class="error">{error_message}</div> doesn't tell me anything about what will happen without reading the definition of the class either. What is your point?

mrmrs commented

It's a lot easier to understand a word without thought, when the word is just the word, rather than a cut down word.

But what are you understanding with content-semantic derived classnames that you can't tell from the content or variable that is being injected into the markup?

equinusocio commented

Using a content-semantic derived class name like

{error_message}
doesn't tell me anything about what will happen without reading the definition of the class either. What is your point?

.error class isn't a valid example. We should have a component, module...objects and contexts.

I will use the classic BEM convention:

/alert_message.{scss,sass,less...}

— .alert-message
—— .alert-message__text
—— .alert-message__text + .alert-message__text--error
—— .alert-message__text + .alert-message__text--success

When you see .alert-message__text you will know that we are inside a .alert-message context. You know what do the classname, when and where. One component, one closed context. And yes, you'll have a long classnames, but you (and the other people) can read this code after months and still understand it. In my opinion.

With web comonents, react, angular... we'll have classnames like header_title_1826513812356 in the source code, so..

  • 👍2
mrmrs commented

That doesn't answer my question though. It doesn't matter how long the classname is or how verbose. Why do I need a classname to explain what my content is? Why doesn't my content do that? At worst why wouldn't a data- attribute tell me that?

  • 👎2
davidhellmann commented

Hm when I see HTML Code like this
<div class="s-12 m-6 l-2 mb-10 text-center">…</div>

I just can do one thing > laughing. Do you have fun with it when you get into a project like this one? Sorry, I'm not really. Project likes this I must work in two files at the same time to understand whats going on.

<div class="alert-message">…</div>
is totally clear for me cause I've a context what's the guy who write this code do with it. I search the CSS Part and can work simply there.

equinusocio commented

You don't know web components.. Finish of the discuss
Il 22/apr/2016 02:05 PM, "David Hellmann" notifications@github.com ha
scritto:

Hm when I see HTML Code like this
`
…

`

I just can do one thing > laughing. Do you have fun with it when you get
into a project like this one? Sorry, I'm not really. Project likes this I
must work in two files at the same time to understand whats going on.

…

is totally clear for me cause I've a context what's the guy who write this
code do with it. I search the CSS Part and can work simply there.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
adamsilver/maintainablecss.com#28 (comment)

davidhellmann commented

You mean stuff like Polymer (https://www.polymer-project.org/1.0/)
I heard about it but you're correct, I've never use it until now. Why? Good question but maybe it's simple and in my environment no one use it.

Cheers.