Definição de prioridade de classe

[rickbenetti]

Alguém já utilizou o formato que a Digital Ocean tá usando no novo site:

*+address, *+blockquote, *+dl, *+fieldset, *+figure, *+ol, *+p, *+pre, *+ul {
    margin-top: 16px;
}

Vi também esta forma de formatar usando o *+ para os headers, queria entender qual a diferença de não usar o *+ e nã usá-lo.

[ortizvinicius]

O estilo será aplicado a todos elementos que sejam seguidos por qualquer outro, caso o elemento seja o primeiro filho ele não terá esse estilo. Então

<p></p> <- Sem margin-top
<p></p> <- Com margin-top

Mas não sei se isso é bom em questão de performance, se não seria melhor um p:first-child { margin-top: 0; }

[willycamargo]

Também tenho essa dúvida em questão de performance. Existem N maneiras de fazer isso:

*+p {
    margin-top: 16px;
}

p:not(:first-child) {
    margin-top: 16px;
}

p {
    margin-top: 16px;
}

p:first-child {
    margin-top: 0;
}

ps: utilizo da última forma por ter lido em algum lugar que era a forma mais performática (faz bastante tempo que li e não encontrei o link 😟 )

[felipefialho]

Uso sempre

p
  &:not(:last-child)
    margin-bottom 2rem

[akfzambrana]

em teoria, utilizar o "irmão adjacente" é mais performático do que usar pseudo-classe ou pseudo-elemento.
Quando se trata de colocar um espaçamento na parte de baixo dos elementos quando houver um grupo de elementos eu utilizo desta forma:

elemento + elemento {
  margin-top: 1em;
}

Vejam q eu apliquei o espaçamento no topo sendo q visualmente eu quero ele embaixo. Desta forma não preciso zerar o primeiro elemento pois so sera aplicado o estilo apenas quando houver elementos irmãos.
Quando faz uma tela que pode ter elementos X no meio entre um elemento e outro vc pode utilizar tb o seletor irmão ~ desta forma funciona igual so q é menos restritivo, vai que vc tem um input hidden entre um p e outro

elemento ~ elemento {
  margin-top: 1em;
}

Se utilizar algum preprocessador da pra utilizar o & como o @lfeh mostrou no exemplo dele
Neste caso ficaria algo assim:

elemento {
  & ~ & {
    margin-top: 1em;
  }
}

[felipefialho]

Acho que a diferença de performance para códigos bem construídos é muito pequena (talvez faça diferença para projetos extremamente complexos) para fazer alguma diferença realmente impactante para o usuário.

Sendo assim, acho mais interessante pensar na escalabilidade e manutenção do projeto a longo prazo do que apenas em performance.

Não gosto de resetar propriedades e pseudos são uma mão na roda para evitar que isso aconteça.

[akfzambrana]

Por isso falei que "em teoria" @lfeh.
Eu utilizo o seletor de irmão pois pros nossos sistemas funciona melhor para nosso tipo de desenvolvimento pois nos utilizamos uma mistura de classes, tags e herança, mesmo não sendo a melhor performance, justamente pois na nossa conta de "custo/beneficio" entre o tempo de desenvolvimento e manutenção é o melhor resultado. Mas como sempre, cai na questão de "depende do projeto", muita gente diz que utilizar tag é ruim por conta da performance, mas colocar classe em cada elemento é muito custoso em times grandes onde vc tem backenders e frontenders mexendo nas funcionalidades.

[ortizvinicius]

Minha dúvida sobre performance era mais relacionado a esse monte de seletor universal *

[felipefialho]

@ortizvinicius Isso acredito que tenha um grande impacto na performance.

[woliveiras]

Existem algumas documentações que falam que o uso de * {} é ruim, mas, uma vez, encontrei isso aqui: csswizardry/CSS-Guidelines#1

Depois eu encontrei isso aqui (no ultimo tópico): http://johnotander.com/css/2015/06/10/css-performance/

E depois esse cara aqui: http://codereview.stackexchange.com/questions/107043/performance-impact-of-using-the-universal-selector-in-css

O que me levou a pensar: entendi nada. - E ficar puto, por não achar algo com gráficos mostrando a diferença de velocidade de um pro outro e tudo mais.

Na internet uns falam que sim, outros que não. Ai magoa o peão. 😞

Alguém já testou a performance disso em grandes aplicações ou teria algum benchmark pra gente?

[adeonir]

Eu uso o * { } para box-sizing e às vezes para margin/padding.

Se olhar no Meyer reset, ele usa algo parecido com esse box-sizing solution.

Não tenho nenhuma grande aplicação para ver se realmente afeta a performance... também gostaria de saber.

[rickbenetti]

Eu lancei essa questão porque a Digital Ocean - Faster and More Accessible the new digitalocean.com fez um post muito legal sobre a velocidade do site e as melhorias na nova versão.

E fuçando você encontra aquela lista de seletores que mostrei acima e fiquei curioso sobre a real utilização.

Gostei muito das respostas e propostas de cada um, muito show sua explicação @akfzambrana.

Concordo com o @lfeh performance vareia de projeto pra projeto, mas ter um benchmark como o menino @woliveiras falou seria muito bom.

[ortizvinicius]

Tava lendo um artigo de alguma weekly e o autor fala sobre seletores universais:

"Margins
We’ve done this. Share your margin definition across elements using the universal selector. Add overrides only where you need them. You won’t need many.

body * + * {
  margin-top: 1.5rem;
}

No, the universal selector will not kill your performance. That’s bunkum."
http://www.heydonworks.com/article/on-writing-less-damn-code

Ele cita esse artigo:
Selector performance
"[...]I’m happy to concede that when some of you saw the two asterisks in * + * at the beginning of this article, you started shaking your head with vigorous disapproval. There is a precedent for that. The universal selector is indeed a powerful tool. But it can be good powerful, not just bad powerful. Before we get into that, though, I want to address the perceived performance issue.

All the studies I’ve read, including Steve Souders’ and Ben Frain’s, have concluded that the comparative performance of different CSS selector types is negligible. In fact, Frain concludes that “sweating over the selectors used in modern browsers is futile.” I’ve yet to read any compelling evidence to counter these findings.

According to Frain, it is, instead, the quantity of CSS selectors—the bloat—that may cause issues; he mentions unused declarations specifically. In other words, embracing class selectors for their “speed” is of little use when their proliferation is causing the real performance issue. Well, that and the giant JPEGs and un-subsetted web fonts.

Contrariwise, the * selector’s simultaneous control of multiple elements increases brevity, helping to reduce file size and improve performance.

The real trouble with the universal sector is that it alone doesn’t represent a very compelling axiom—nothing more intelligent than “style whatever,” anyway. The trick is in harnessing this basic selector and forming more complex expressions that are context-aware.[...]"
http://alistapart.com/article/axiomatic-css-and-lobotomized-owls

Asterísticus FTW!