Skip to content

Instantly share code, notes, and snippets.

@stereoscott
Last active Dec 17, 2015
Embed
What would you like to do?
<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>
<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>
// 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

stereoscott commented May 15, 2013

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

motionsuggests commented May 15, 2013

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