Lets assume you want to create a "error notification" component and this component contains 2 sub components, a "close button" and a "read more" button in an application called "spike", something like:
How do I setup my CSS to style the component and it’s subcomponents.
Well I like to name components and subcomponents by what they are and try to keep the names descriptive, but short:
<!doctype html> <html> <head> <title>Research</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="Research page"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Icons --> <link rel="shortcut icon" href="/Images/icon256x256.png"> <link rel="icon" href="/Images/icon_96x96.png"> <!-- App styles --> <style> /* Class must be set on the root element of the "error notification" component. */ .spike-error-notification { } /* Styling for the "close button". */ .spike-error-notification .spike-close-button { } /* Styling for the "read-more button". */ .spike-error-notification .spike-read-more-button { } </style> </head> <body> <div class="spike-error-notification"> <button class="spike-close-button" type="button"><span>×</span></button> <strong>An unhandled exception occurred.</strong> <button class="spike-read-more-button" type="button">Read more...</button> </div> </body> </html>