If I were to develop a reusable component like a table that will be used across various pages, the content and number of columns may differ from one page to another, but the overall design should remain consistent.
.my-table {
background-color: ... etc
color: ... etc
}
When it comes to making this component responsive, should each page have its own set of media queries to adjust the appearance of the component, or should the component itself handle the queries?
For instance, you might want to hide specific columns when viewing on mobile on one page, while on another page with fewer columns, hiding those particular ones wouldn't make sense. How should the responsive behavior be managed in these scenarios? Should it be separate from the component styles?
Another scenario often encountered is how CSS guides suggest structuring layout classes such as:
.layout-columns-2 {
float: left;
width: 50%;
}
.layout-columns-4 {
float: left;
width: 25%;
}
These classes can be reused for creating side-by-side column layouts, but difficulties arise once responsive rules need to be applied.
Consider a situation where on one page, you wish to shift from floated columns to stacked columns at 600px width, while on another section of the same page, the transition should occur at 800px width. What would be the most effective way to approach this dilemma?