skip to content
Cactus Log

Why CSS is important?

/ 3 min read

css, web-design, web-development

Why CSS?

CSS is important for web design because it allows for the styling and presentation of web pages. Without CSS, websites would be plain text. While HTML provides structure to a document, CSS enables styling. According to MDN, “Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML, or XHTML). CSS describes how elements should be rendered.”

Are there alternatives?

There is no true alternative to CSS at this point. CSS is widely supported and is a web standard. As MDN explains, “CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications.”

However, there have been some attempts to replace CSS over time. Below are a few examples:

  1. JavaScript-Based Style Sheets Back in 1996, some members of the Netscape team proposed using JavaScript to style websites. “This document specifies a method to attach styles to HTML documents using the existing property-based language JavaScript” (JavaScript-Based Style Sheets, 1996).

  2. XSL and CSS Leigh Dodds (2000) noted, “A hot topic in the XML community was the Extensible Stylesheet Language (XSL)—specifically, the aspects relating to text layout, so-called Formatting Objects (XSL-FO).” This was seen as an alternative to CSS for XML use cases (XSL and CSS: One year later, 2000).

  3. GSS GSS was an alternative that never gained much popularity. “GSS reimagines CSS layout and replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver—the same algorithm Apple uses to compute native layout” (CSS polyfills from the future | GSS).

In my opinion, GSS is more of an extension to CSS than a competitor. Grid functionality eventually became part of CSS as a module, rendering GSS unnecessary.

Best practices for using CSS?

  1. Manage your CSS Poorly written CSS can be hard to maintain, read, and optimize for performance. A good piece of advice from Nielsen (1997) is to centralize your CSS: “Use a single style sheet for all of the pages on your site.” If you’re building a single-page app, embedding a style tag in the document head is acceptable. For websites, centralizing CSS is ideal. Avoid inline styles unless necessary.

  2. Build your site to work without CSS Nielsen (1997) also advises that “Pages must continue to work when style sheets are disabled.” This is crucial for accessibility and web standards compliance.

  3. Do not use absolute font sizes Even in 1997, responsive design principles were already being considered. “Use relative font sizes so that users can resize the text if they want to.”

  4. Use classes While this seems obvious, it’s worth emphasizing. “Use classes to define styles that can be reused throughout the site.”

Finally, on the modern web, my advice is to stay up-to-date with new CSS modules, check browser support for features, and consider minimalistic frameworks like Tailwind or reset styles like Remedy.

  1. Use cascade layers Although beyond the scope of this course, cascade layers are worth mentioning: “A CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important” (Cascade Layers Guide, 2024). If you’ve ever had CSS styles that wouldn’t apply until you comb through the entire CSS file, you’ll appreciate cascade layers.

References