How do you prevent CSS conflicts between components

        /* Example of BEM methodology to avoid CSS conflicts */
        .button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .button--primary {
            background-color: blue;
            color: white;
        }
        
        .button--secondary {
            background-color: gray;
            color: white;
        }
        
        /* Example of CSS namespacing */
        .component-name {
            /* Styles specific to the component */
        }
        
        .component-name__element {
            /* Styles for specific elements within the component */
        }