Use classes for reuse
Classes are the default choice for styling patterns you want to apply to more than one element or maintain as a design convention.
Class and ID Basics
Use classes and ids in Wappler with a clear separation between reusable styling hooks and one-off element targeting.
Introduction
Section titled “Introduction”Classes and ids solve different problems. In Wappler, keeping that distinction clear helps with styling, JavaScript targeting, anchors, and readable collaboration between visual editing and code-level inspection.
If you use ids where a class should do, the page becomes brittle. If you use generic classes with no naming intent, the page becomes hard to scan.
Use ids sparingly
Ids are best for one-off targets such as anchors, precise references, or framework-specific hooks that truly need a unique element.
Start with semantic HTML, then add classes for styling intent.
Treat ids as unique by definition.
Avoid baking visual meaning into every single class name.
Prefer a small set of clear reusable classes over many one-off names.
Make styling hooks readable
Section titled “Make styling hooks readable”Good class and id choices make the Properties panel, code view, and team conversations line up cleanly.
Class naming
Section titled “Class naming”Choose names that explain the role of the styling hook, not just the one screenshot you are looking at today.
Aim for reuse
A class name should still make sense when a second element needs the same styling intent.
ID usage
Section titled “ID usage”Reserve ids for true uniqueness. Common examples are skip links, collapsible target references, section anchors, or integrations that explicitly ask for an id.
Stay specific
If more than one element could reasonably need the same hook, it probably should be a class instead.
Work with Bootstrap, not against it
Section titled “Work with Bootstrap, not against it”Bootstrap already provides layout and utility choices for many common styling needs. Reach for those controls first, and add project-specific hooks only when they express meaning Bootstrap does not already cover.
Prefer existing controls
Use Bootstrap utilities and component-specific properties before creating extra styling hooks.
Next steps
Section titled “Next steps”With structure and naming clear, you can style layout rhythm more safely and continue into responsive image work or reactive pages.