Skip to content

Instantly share code, notes, and snippets.

@s0ber

s0ber/menu.sass

Last active December 12, 2015 00:09
Show Gist options
  • Save s0ber/4681716 to your computer and use it in GitHub Desktop.
Save s0ber/4681716 to your computer and use it in GitHub Desktop.
Download ZIP
Menu states styles
Raw
menu.sass
// NOT recommended
.header
.menu
// styles for menu in header
.footer
.menu
// styles for menu in footer
// when we doing like this, blocks .menu, .header and .footer became dependent,
// there is situation, when .menu styles smudge along different files
// and also files for footer and header now also have styles for menu,
// which is not so good
// Recommended
// Each block styles are placed in their files, blocks are independent and know nothing about each other,
// When we need to render block in another way, we are using modifier.
// header.scss, this block knows nothing about .menu block
.header
.header__logo
// so on...
// footer.scss, this block knows nothing about .menu block
.footer
.footer__logo
// so on...
// menu.scss, this block knows nothing about .header and .footer blocks
// but it knows about it's own states .for-header и .for-footer
.menu
// some styles...
&.for-header
&.for-footer
// and a little profit - when reducing cascade, we improving page render speed from 2-5 to 10 times
// But anyway, it's recommendations, not restrictions. It's okay to use cascade to change child block positioning,
// i.e. styles, that do not change it's look, but only positioning.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment