Pseudo selectors before or after element properties?

[SandmanPWNZ]

this:

.column {
    &:before {
    
    }
    border: 1px solid $special-text-color-blue;
  }

or this:

.column {
    border: 1px solid $special-text-color-blue;

    &:before {

    }
  }

[SandmanPWNZ]

@nalabdou , have you read the title of issue? :) I'm asking which order is correct, do I add pseudo selectors for an element before element properties or after?

[ljharb]

I suppose as long as you choose something consistent, it’s fine?

conceptually it seems like I’d probably want “before”s to go at the top, and “after”s to go at the bottom.

[GoodGuyGregory]

I always use mine after the element itself

[steve-klockow]

I think this is a question of personal patterns. I always write the Element Properties and than I go to the included elements. In this way I have a better overview about everything. But however you do it, you have to follow consistent, then it is better to read.

[jasbir91709]

it doesn't matter you can choose any of the two because writing pseudo selectors after or before element will make no difference.

[Hygor]

I always use mine after the element itself

I use it like that... either for :focus & :blur etc... always at the bottom of the el { }

[JaneEye]

test ok

[rudy0628]

i test for two situation, both goes will

[ghost]

I usually pick the second one since it defines the pseudo-elements later after defining all the styling

[Sylar-codex]

I think this is based on personal preference, as I normally write my pseudo selectors after

[Ay989]

from a maintainability perspective, the second code snippet is better because it places the border property first, then follows it with any pseudo-element selectors like :before. Makes the code easier to read in my opinion

[camoqq]

you can put it anywhere you'd like, the code will not be affected by doing this