What's the difference between a modifier and a state?

[mubaraqwahab]

I came across SuitCSS recently, and I've been wondering what the difference is between a modifier class and a state class.

There's an example in the docs of .Tweet.is-expanded. Could this be .Tweet--expanded instead? Also, there's .Button--default; could it be .Button.is-default instead?

Thank you.

[simonsmith]

Modifiers are a type of the component, state is when something has happened to change it

I want a button, and it's a primary

Button Button--primary

I clicked the button, now it's open

Button is-open

I clicked the primary button, now that is open too

Button Button--primary is-open

Hope that helps

[mubaraqwahab]

Yes, I understand now. Thank you!