search

csinn / CSInn

C# Inn community website.
MIT License
26 stars 9 forks source link

Using vanilla CSS media queries instead of TailWindCSS (example in comments) #43

Open andrijajocic opened 4 years ago

andrijajocic commented 4 years ago

I have noticed the use of TailWindCSS in the website's HTML files. I believe this is redundant with CSS-3's new media query feature:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

This is merely an example; instead of changing background colors, we can use this to make more responsive web pages using more well known technologies and wider browser support.

I'd love to get everyone's opinion on this.

trinitrotoluene commented 4 years ago

Er, Tailwind is a CSS-only framework- so the responsive classes already make use of media queries.

It isn't an excuse not to know CSS, but it makes writing responsive pages a lot less tedious. Tailwind's also intended to be used in a component-like model (think Razor components or Vue.js) so you can minimise code reuse while still having total control over your styles.

It's also nice because unlike other frameworks it doesn't bring in a runtime JS dependency (although you do need Node.js if you want to compile it from your own stylesheet)

I don't really have an issue if we choose not to use it- but even your example shows that Tailwind is significantly more concise:

<body class="bg-blue-200 sm:bg-green-600">
<!-- Content -->
</body>