Мой ТОП-5 лучших CSS-in-JS решений

[nin-jin]

Забавно, что все эти css-in-js ничего не знают про, собственно, Cascading Style Sheets, а единственная либа, которая про это знает, в топ не попала: https://mol.hyoo.ru/#!section=docs/=xwq9q5_f966fg

[DarthVictor]

И styled и linaria прекрасно работают с каскадностью.

[nin-jin]

Действительно, каскад там есть, но кривой - по именам блоков, но не элементов, в терминах БЭМ.

[DarthVictor]

Там каскад по имени сгенерированного класса. Примерно как в css-modules.

[nin-jin]

Ну вот в каунтере, как стилизовать кнопку инкремента так, чтобы не задеть остальные кнопки на любой глубине вложенности?

[DarthVictor]

import styled from 'styled-components'; // or @linaria/react

const Counter = () => {
  ... 
  return <div>
    ...
    <button onClick...>Styled button</button>
  </div>
};


const CounterWithStyledButton = styled(Counter)`
  button {
    ....
  }
`

Примерно так

[nin-jin]

Это стилизует все кнопки подряд, а не одну конкретную.

[DarthVictor]

Это стилизует кнопки внутри компонента. Если вам нужно одну кнопку компонента, то нужно было так и писать. Будет соответственно

import styled from 'styled-components'; // or @linaria/react
...
const MyBytton = styled.button`
  ...
`;
...

const Counter = () => {
  ... 
  return <div>
    ...
    <button onClick...>Unstyled button</button>
    <button onClick...>Unstyled button</button>
    <MyBytton onClick...>Styled button</MyButton>
  </div>
};


const CounterWithStyledButton = styled(Counter)`
  ${MyBytton} {
    ....
  }
`

[nin-jin]

Я именно так и написал - надо стилизовать конкретную кнопку, не перелопачивая код сторонних компонент. В вашем же примере нужен их глубокий рефакторинг.

[DarthVictor]

Вы про какой именно глубокий рефакторинг?
Про оборачиваение в styled или что?
Если про styled, то так тоже можно:

import { css } from '@linaria/core';

const counterClassName = css`
  .another_styled_button {
    ....
  }
  /* Вот еще примеры */
  &::after {
    /* .thing::after */
    content: '🌟';
  }

  h3 {
    /* .thing h3 */
    color: tomato;
  }

  .code {
    /* .thing .code */
    color: #555;
  }

  & + & {
    /* .thing + .thing */
    background: yellow;
  }

  &.bordered {
    /* .thing.bordered */
    border: 1px solid black;
  }

  .parent & {
    /* .parent .thing */
    color: blue;
  }
`

const Counter = () => {
  ... 
  return <div>
    ...
    <button onClick...>Unstyled button</button>
    <button onClick...>Unstyled button</button>
    <button onClick... className="another_styled_button">Styled button</button>
  </div>
};

[nin-jin]

По имени класса сматчатся и одноименные элементы других компонентов же.

[DarthVictor]

У вехнего div в Counter я забыл className={counterClassName}просто.

css тег добавит фактически

.counterClassName_dsfdlahfd .another_styled_button {
....
}

в результирующий css

[nin-jin]

Что сматчится в том числе и на:

.counterClassName_dsfdlahfd .someAnotherCoponent_dsjkjds .another_styled_button

[functyon]

всё то же самое умеют css-modules.
css в коде - то еще удовольствие.

[taujavarob]

Странные библиотеки из прошлого.

Сейчас это tailwind. Как никак на дворе 2024 год.

[Realetive]

Чего только не придумают — лишь бы CSS не учить…

[HabrUser13]

CSS в JS - это зло ;-)
Это как гранатой гвозди заколачивать.

На заре веб программирования всякой дичи хватало. Но со временем выработались "хорошие практики" и из мира хаоса многое стало упорядочиваться. Наконец-то стали отделять "мух от котлет". И вот спустя 25 лет "новое поколение" сново наступает на те же грабли. Всё развивается по спирали :-)))