Custom CSS

v 1.1.0
Author: Luis Arenas.

Creating a custom CSS for your product is a critical step in developing a consistent and
brand-aligned user interface. This article will guide you through the process of creating a
custom CSS from scratch, focusing on implementing a dark theme, utilizing custom
variables, leveraging grid and flex systems, defining classes for components, and
adhering to good practices and useful tricks.

Introduction to Custom CSS

Custom CSS (Cascading Style Sheets) allows you to create unique visual designs and
user experiences for your web application or website. It gives you the control to define
styles, layouts, and responsiveness, tailoring the user interface to your product's needs.

Implementing a Dark Theme

1. Base Colors: Start by defining a color palette that includes primary, secondary, and
accent colors. For a dark theme, choose colors that reduce eye strain and provide
good readability.

2. Contrast Ratios: Ensure text and background colors have a sufficient contrast ratio
to enhance readability. Tools like WebAIM's Contrast Checker can be useful.

3. Consistency: Use the same color scheme throughout your UI to maintain

consistency. Dark themes should be consistent across all components and pages.

4. Overridable: Make it easy to switch between dark and light themes, allowing users to
choose based on their preference.

Utilizing Custom Variables

CSS custom properties (variables) can significantly simplify theming and reusability in
your stylesheets.
 1. Define Variables: Define global variables for colors, font sizes, spacing, etc., at the
root level. This makes it easier to maintain and update your styles.

:root {
--primary-color: #2979ff;
--secondary-color: #ffc107;
--font-size-normal: 16px;
--spacing-unit: 8px;
}

2. Usage: Use these variables throughout your CSS to maintain consistency and
facilitate changes.

body {
color: var(--primary-color);
font-size: var(--font-size-normal);
}

Leveraging Grid and Flex Systems

Grid and Flexbox are powerful CSS tools for creating responsive and adaptive layouts.

1. CSS Grid: Use Grid for complex, two-dimensional layouts. Define grid containers and
grid items, leveraging properties like grid-template-columns , grid-template-rows , and
grid-gap .

2. Flexbox: Use Flexbox for one-dimensional layouts. It's great for aligning items
horizontally or vertically, making it ideal for headers, footers, or sections where the
size of items might vary.

3. Responsive Design: Utilize media queries to adapt your grid and flex layouts to
different screen sizes, enhancing mobile responsiveness.

Defining Classes for Components

Organize your CSS by defining reusable classes for components such as buttons, cards,
navigation bars, etc.
 1. Naming Convention: Adopt a consistent naming convention like BEM (Block Element
Modifier) to make your classes more readable and maintainable.

2. Modularity: Design your components to be self-contained, making them easier to

reuse and maintain.

3. State Classes: Define classes for different states (e.g., active, disabled) to easily
toggle UI changes.

Defining CSS Variables for Colors

First, we define our color variables in the :root selector, which makes these variables
globally available in our CSS:

:root {
--primary-color: #007bff;
--primary-color-hover: #0056b3;
--secondary-color: #6c757d;
--secondary-color-hover: #545b62;
--text-color: #ffffff;
}

Here, we've defined two sets of colors for primary and secondary buttons, along with a
text color.

Creating Base Button Class

Now, we'll create a base button class that defines common styles that all buttons will
share:

.button {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
border: none;
cursor: pointer;
color: var(--text-color);
transition: background-color 0.3s;
}

This class sets up padding, font size, border radius, and other properties that are
common across all button types.
Extending the Base Class for Button Variants
Next, we extend the base class for specific button variants, like primary and secondary
buttons, using the defined color variables:

Primary Button

.button-primary {
background-color: var(--primary-color);
}

.button-primary:hover {
background-color: var(--primary-color-hover);
}

The .button-primary class modifies the background color for primary buttons and
changes it on hover, utilizing the color variables.

Secondary Button

.button-secondary {
background-color: var(--secondary-color);
}

.button-secondary:hover {
background-color: var(--secondary-color-hover);
}

Similarly, .button-secondary sets the background colors for secondary buttons.

HTML Example Using These Classes

Here's how you might use these classes in HTML:

<button class="button button-primary">Primary Button</button>

<button class="button button-secondary">Secondary Button</button>

Each button has two classes: the base .button class and a variant class ( .button-primary
or .button-secondary ) that applies the specific styles for that button type.

Good Practices
 1. Maintainability: Write clean, concise, and well-commented CSS. Use a preprocessor
like Sass or LESS for better structure and reusability.

2. Performance: Optimize your CSS for performance. Minimize the use of expensive
properties like box-shadow and border-radius on large areas.

3. Cross-Browser Compatibility: Test your CSS across different browsers and devices
to ensure consistent user experiences.

4. Accessibility: Ensure your design is accessible, providing adequate keyboard

navigation and ARIA (Accessible Rich Internet Applications) roles where necessary.

Useful Tricks and Notes

1. CSS Variables in Media Queries: Use CSS variables within media queries to adjust
styles dynamically based on screen size.

2. Custom Properties for Themes: Leverage custom properties to switch between

themes dynamically.

3. Fallbacks: Provide fallback values for older browsers that may not support certain
CSS features.

4. DevTools: Use browser developer tools to debug and optimize your CSS, observing
how changes affect the layout and performance in real-time.

Conclusion
Creating a custom CSS for your product is an iterative and detailed process. By focusing
on implementing a user-friendly dark theme, utilizing CSS variables and component-
based classes, you can create a flexible and maintainable styling system for your
components. This approach not only keeps your styles consistent across the application
but also makes it easier to update colors or other style properties across all components
by changing a single value. Leveraging grid and flex systems for responsive layouts,
organizing your styles with component-based classes, and adhering to good practices,
you can create a robust and maintainable CSS framework that aligns with your product's
identity and provides a seamless user experience.