Skip to content

perf: Split stylesheet into data-attrs and classes to improve performance #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackdomleo7 merged 2 commits into from
Aug 26, 2025
Merged

perf: Split stylesheet into data-attrs and classes to improve performance #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
487a4ed
perf: Split stylesheet into data-attrs and classes to improve perform…
jackdomleo7 Aug 26, 2025
dcd5ac2
build(version): Bump cooltipz-css to v2.4.0
jackdomleo7 Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/ISSUE_TEMPLATE/bug-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ title: '[BUG]: <title>'
Provide screenshots if applicable.
-->
Cooltipz.css version:
Cooltipz.css stylesheet: main | data-attrs | classes

## What is the expected result?

Expand Down
74 changes: 68 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,14 @@ Play with Cooltipz.css on [CodePen](https://codepen.io/JackDomleo/pen/mderEeG).
- Easy and simple tooltips with **quick setup**
- Pure CSS, no JavaScript
- Highly customisable
- **Multiple versions available** - Combined, data attributes only, or classes only for optimal bundle size
- Accessible with `aria-label` attributes
- Automatically disables animation if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion?ref=cooltipz.jackdomleo.dev)
- Options to use classes or `data-` attributes
- Options to import via CDN, npm or yarn
- Options to import SCSS <sub><sup>(npm &amp; yarn only)</sup></sub> or CSS stylesheets <sub><sup>(expanded or minified)</sup></sub>
- Supports a wide range of characters and languages (including emojis, [Font Awesome 4](https://fontawesome.com/v4.7.0?ref=cooltipz.jackdomleo.dev) and [Font Awesome 5](https://fontawesome.com?ref=cooltipz.jackdomleo.dev) icons)
- Uses [Autoprefixer](https://github.com/postcss/autoprefixer?ref=cooltipz.jackdomleo.dev) when generating the CSS stylesheets and [cssnano](https://github.com/cssnano/cssnano?ref=cooltipz.jackdomleo.dev) to minify the minfied stylesheet
- Uses [Autoprefixer](https://github.com/postcss/autoprefixer?ref=cooltipz.jackdomleo.dev) when generating the CSS stylesheets and [cssnano](https://github.com/cssnano/cssnano?ref=cooltipz.jackdomleo.dev) to minify the minified stylesheet

---

Expand All @@ -48,11 +49,28 @@ Play with Cooltipz.css on [CodePen](https://codepen.io/JackDomleo/pen/mderEeG).

### CDN

Cooltipz.css is available in three versions:
- **Combined** (`cooltipz.css`/`cooltipz.min.css`) - Full version supporting both data attributes and classes
- **Data attributes only** (`cooltipz-data-attrs.css`/`cooltipz-data-attrs.min.css`) - Lighter version for data-attribute usage only
- **Classes only** (`cooltipz-classes.css`/`cooltipz-classes.min.css`) - Lighter version for class-based usage only

Choose the version that best fits your needs to minimize bundle size.

In the below CDN links:
- Replace `:version` with a version [listed here](https://www.npmjs.com/package/cooltipz-css?activeTab=versions) (latest version is always recommended). If you always want to get the latest stylesheet, remove `@:version` completely (Not recommended).
- Replace `:file` with one of the below:

**Combined (full functionality - 3.06kB when compressed):**
- `cooltipz.css` <sub><sup>(Expanded stylesheet)</sup></sub>
- `cooltipz.min.css` <sub><sup>(Minfied stylesheet)</sup></sub>
- `cooltipz.min.css` <sub><sup>(Minified stylesheet)</sup></sub>

**Data attributes only (smaller bundle - 1.81kB when compressed):**
- `cooltipz-data-attrs.css` <sub><sup>(Expanded stylesheet)</sup></sub>
- `cooltipz-data-attrs.min.css` <sub><sup>(Minified stylesheet)</sup></sub>

**Classes only (smaller bundle - 1.79kB when compressed):**
- `cooltipz-classes.css` <sub><sup>(Expanded stylesheet)</sup></sub>
- `cooltipz-classes.min.css` <sub><sup>(Minified stylesheet)</sup></sub>

```html
<!-- HTML -->
Expand Down Expand Up @@ -85,9 +103,19 @@ import 'cooltipz-css';

_Or_ use the SCSS or CSS into your Sass/SCSS
In the below example, replace `:file` with one of the options below:
- `src/cooltipz` <sub><sup>(.scss file)</sup></sub>
- `cooltipz.css` <sub><sup>(Expanded .css)</sup></sub>
- `cooltipz.min.css` <sub><sup>(Minified .css)</sup></sub>

**SCSS source files:**
- `src/cooltipz` <sub><sup>(.scss file - combined version)</sup></sub>
- `src/cooltipz-data-attrs` <sub><sup>(.scss file - data attributes only)</sup></sub>
- `src/cooltipz-classes` <sub><sup>(.scss file - classes only)</sup></sub>

**Compiled CSS files:**
- `cooltipz.css` <sub><sup>(Expanded .css - combined version)</sup></sub>
- `cooltipz.min.css` <sub><sup>(Minified .css - combined version)</sup></sub>
- `cooltipz-data-attrs.css` <sub><sup>(Expanded .css - data attributes only)</sup></sub>
- `cooltipz-data-attrs.min.css` <sub><sup>(Minified .css - data attributes only)</sup></sub>
- `cooltipz-classes.css` <sub><sup>(Expanded .css - classes only)</sup></sub>
- `cooltipz-classes.min.css` <sub><sup>(Minified .css - classes only)</sup></sub>
```scss
/* Webpack */
@use '~cooltipz-css/:file' as *;
Expand All @@ -98,6 +126,34 @@ In the below example, replace `:file` with one of the options below:

---

## Choosing the Right Version

Cooltipz.css offers three different versions to help you optimize your bundle size:

### 🎯 **Combined Version** (Default)
- **Files:** `cooltipz.css`, `cooltipz.min.css`, `src/cooltipz.scss`
- **Use when:** You want to use both data attributes and classes in your project
- **Supports:** Both `data-cooltipz="tooltip text"` and `aria-label="tooltip text"` with classes like `.cooltipz--top`
- **Size:** Full feature set

### 📊 **Data Attributes Only**
- **Files:** `cooltipz-data-attrs.css`, `cooltipz-data-attrs.min.css`, `src/cooltipz-data-attrs.scss`
- **Use when:** You only use data attributes like `data-cooltipz="tooltip text"` and `data-cooltipz-dir="top"`
- **Supports:** Only data attribute syntax
- **Size:** ~40% smaller than combined version
- **Example:** `<button data-cooltipz="Save file" data-cooltipz-dir="top">Save</button>`

### 🎨 **Classes Only**
- **Files:** `cooltipz-classes.css`, `cooltipz-classes.min.css`, `src/cooltipz-classes.scss`
- **Use when:** You prefer semantic CSS classes with `aria-label` attributes
- **Supports:** Only class-based syntax with `aria-label`
- **Size:** ~40% smaller than combined version
- **Example:** `<button aria-label="Save file" class="cooltipz--top">Save</button>`

> 💡 **Recommendation:** Start with the **data attributes only** version if you're unsure, as it provides the most intuitive API. You can always switch to the combined version later if needed.

---

## License

Type - **MIT**
Expand Down Expand Up @@ -135,7 +191,13 @@ We appreciate any feedback, good or bad and are always looking for new ideas to
- `git clone https://github.com/jackdomleo7/Cooltipz.css.git` or clone your forked repository
- `cd Cooltipz.css`
- `npm ci`
- `npm run build` to compile development SCSS to CSS
- `npm run build` to compile all versions (combined, data-attrs, and classes) from SCSS to CSS

**Build commands:**
- `npm run build` - Build all three versions
- `npm run build:combined` - Build only the combined version (default)
- `npm run build:data-attrs` - Build only the data attributes version
- `npm run build:classes` - Build only the classes version

### Branch

Expand Down
Loading