Skip to content

Instantly share code, notes, and snippets.

@stephenhmarsh

stephenhmarsh/styleguide.md

Created December 16, 2020 18:46
Show Gist options
  • Save stephenhmarsh/0c5fdf61788b980fa6cddc654ce32d96 to your computer and use it in GitHub Desktop.
Save stephenhmarsh/0c5fdf61788b980fa6cddc654ce32d96 to your computer and use it in GitHub Desktop.
Download ZIP
Marble Code Styleguide (Draft)
Raw
styleguide.md

Use BEM

BEM Modifiers should be @mixins.

Good:

@mixin primary-button--small {
	padding: 0.7777777778em 2.5em;
	&.primary-button--ghost-light,
	&.primary-button--ghost-dark {
		padding: calc(0.7777777778em - #{$border-width-ghost})
			calc(2.5em - #{$border-width-ghost});
	}
}
.primary-button--small {
	@include primary-button--small();
}

BAD!:

.primary-button--small {
	padding: 0.7777777778em 2.5em;
	&.primary-button--ghost-light,
	&.primary-button--ghost-dark {
		padding: calc(0.7777777778em - #{$border-width-ghost})
			calc(2.5em - #{$border-width-ghost});
	}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment