Syntax

CSS Naming Convention in Celebrate Tech

In Celebrate Tech, we follow a unique and structured approach to naming CSS classes. Our convention takes the first and last letter of each word in a property to create a concise and readable class name.

Class Naming Examples

• DyFx → display: flex;
• FxDnRw → flex-direction: row;
• BxSw → box-shadow: ...;
• WdMn → min-width: ...;
• PnRe → position: relative;
• CrBdWe91 → Custom class for color, border, white, etc.

Why Use This Syntax?

• Short & Readable: Keeps class names minimal while retaining clarity.
• Consistent: Ensures uniformity across projects for easy maintenance.
• Scalable: Works well for large projects without class name conflicts.

How to Apply?

Simply use the predefined class names in your HTML elements. For example:

<div class="DyFx Pg20">
    <p>This is a flex container with a padding.</p>
</div>

With this structured approach, you can build efficient, maintainable, and visually stunning interfaces in no time!