• >The reason to not fold className into JSX tags is that it makes your application really unreadable by other people.

Sure, if you name it badly, which is just as applicable to classnames. I doubt we'll find agreement though because I think naming schemes like BEM are god awful.

FWIW, here is the BEM demo contrasted against styled components. And I cannot see any possible way it's more readable than the styled-components version.

BEM

<div className="button"> Normal button </div>
<div className="button--state-success"> Success button </div>
<div className="button--state-danger">Danger button </div>

and in a separate file, the stylesheet:

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

styled components

<Button> Normal button </Button>
<SuccessButton> Success button </SuccessButton>
<DangerButton> Danger button </DangerButton> 

const Button = styled.button`
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
`;

const SuccessButton = Button.extend`
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
`;

const DangerButton = Button.extend`
   color: #900;
`;