Skip to content

Instantly share code, notes, and snippets.

@stereoscott

stereoscott/gist:5584743

Last active December 17, 2015 09:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stereoscott/5584743 to your computer and use it in GitHub Desktop.
Save stereoscott/5584743 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<body class="overview">
<section class="overview-section engage-section">
<h1 class="overview-section-header engage-section-header">xxx</h1>
</section>
<section class="overview-section measure-section">
<h1 class="overview-section-header measure-section-header">xxx</h1>
</section>
</body>
<body class="how">
<section class="how-section deliver-section">
<h1 class="how-section-header delivery-section-header">xxx</h1>
</section>
</body>
Raw
gistfile2.html
<body class="overview">
<section class="content engage">
<h1 class="header">xxx</h1>
</section>
<section class="content measure">
<h1 class="header">xxx</h1>
</section>
</body>
<body class="how">
<section class="content deliver">
<h1 class="header">xxx</h1>
</section>
</body>
Raw
gistfile3.css
// all sections
.overview-section, .how-section {}
// specific section
.engage-section {}
// all headers
.engage-section-header, .how-section-header {}
/* OR */
// all sections
.content {}
// specific section
.engage {}
// all headers
.content .header {}
@stereoscott
Copy link
Author

Also, I like leaving the html element names out of the class names (unless the html element happens to be the same semantically... like 'section')

@motionsuggests
Copy link

Yours is totally cleaner. And still is semantic and reusable. I knew I got crazy with class names. I think a better approach for me would be to write all html first then style from general to specific. I stared out styling individual elements too soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment