Snippet Anatomy

Understanding the structure of a DevSnips snippet is key to using, customizing, and contributing them effectively. Each snippet is designed to be a self-contained, modular component. Let's break down the anatomy using a simple card component as an example.

Example Snippet: Basic Card

A snippet in DevSnips isn't just one piece of code; it's often a combination of HTML, CSS, and sometimes JavaScript. Here's how a simple card snippet would be structured.

HTML Structure

The HTML forms the backbone of the component. It's written to be semantic and accessible, using standard HTML5 tags and a logical hierarchy. Snippets are self-contained and do not include boilerplate like <html> or <body> tags.

<!-- Basic Card Snippet -->
<article class="card">
  <div class="card__header">
    <h3 class="card__title">Card Title</h3>
  </div>
  <div class="card__body">
    <p>This is the main content of the card.</p>
  </div>
  <div class="card__footer">
    <button class="card__button card__button--primary">Action</button>
  </div>
</article>

CSS Styling with BEM

CSS snippets provide the styling. We use the BEM (Block, Element, Modifier) naming convention to ensure styles are scoped, modular, and predictable, which prevents conflicts with other styles on your page.

Block: The outermost container of the component (e.g., .card).
Element: A component part that is semantically tied to the block (e.g., .card__title).
Modifier: A flag on a block or element used to change its appearance or behavior (e.g., .card__button--primary).

/* Basic Card Styles */
.card {
  border: 1px solid #30363d;
  border-radius: 6px;
  overflow: hidden;
  background-color: #0D1117;
  max-width: 320px;
}

.card__header, .card__body, .card__footer {
  padding: 16px;
}

.card__title {
  margin: 0;
  font-size: 1.25rem;
  color: #c9d1d9;
}

.card__button {
  border: 1px solid #30363d;
  background-color: transparent;
  color: #c9d1d9;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Modifier for a primary button */
.card__button--primary {
  background-color: #238636;
  border-color: #238636;
  color: #ffffff;
}

.card__button:hover {
  filter: brightness(1.2);
}

JavaScript Behavior

JavaScript snippets add interactivity. To ensure portability and avoid dependencies, all JavaScript is written in vanilla JS. Importantly, the JavaScript for a snippet is not embedded within the HTML file itself.

Instead, JavaScript snippets are provided separately. A user can copy the JavaScript and integrate it into their project's main script files. On the DevSnips website, the "Try It" button injects the HTML, CSS, and JavaScript into the Playground environment, allowing users to see the interactive component in action without any setup.