Style Prefix

Last updated: 20 days ago

Category: Get Started

OrcaUI's CSS styles use the `_` prefix as a namespace identifier. This character is reserved for private/internal use, and users should avoid using it in their custom CSS styles.

Introduction

To avoid global namespace pollution, OrcaUI uses the _ underscore character as a namespace prefix for CSS classes and CSS variables. Therefore, you'll see the following naming conventions in OrcaUI's CSS files:

 
._alert{}
--_alert-w:40rem;

Using _ prefix indicates these styles are private and exclusive to OrcaUI. Users should not define their own styles using this prefix. If your project deeply integrates with OrcaUI and wants to maintain consistent code style, you can replace _ with your own custom prefix. Besides - and _ (the only two special characters allowed in CSS), you can use other letters or special characters.

Note that in CSS files, the only two legal special characters are - and _. If you need to use other special characters, they must be escaped. For example:

 
// In CSS, the "+" character must be escaped as "\+"
<style>
  .\+btn{}
</style> 
<span class="+btn"></span>

Batch Prefix Replacement

If OrcaUI's naming convention conflicts with your project, or if you want to customize the prefix, you can use text replacement tools to replace all _ characters in CSS files.

If you have access to the source files, all OrcaUI style source files are located in the src/styles directory, containing both less and css files. You can use custom scripts to batch replace _ characters in the less files.