Cascading Style Sheets (CSS) and Its Impact on the Design of a Web Application

Consistency of appearance

CSS ensures uniform styling across multiple pages within a web application.

• Global/external stylesheets
• CSS variables
• CSS frameworks

Flexibility with browsers or display devices

Modern applications should adapt to various screen sizes, resolutions and browsers.

Responsive design

CSS allows for responsive design with media queries to change styles based on screen size. Use flexible units (%, vh, vw, rem, em) instead of fixed pixel values for better scalability.

Example:

<pre><code>@media (max-width: 768px) { .container { width: 100%; font-size: 1.2rem; } }</code></pre>

Cross-browser compatibility

• Different browsers interpret CSS rules differently
• Vendor prefixes like -webkit-, -moz-, -o-
• Apply CSS resets to standardise default styles
• Test in multiple browsers

Example with vendor prefixes:

<pre><code>.box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }</code></pre>

CSS maintenance tools

CSS preprocessors (SASS, LESS)

CSS preprocessors allow for variables, nesting and mixins to simplify and organise code, and add features not natively available in CSS.

• Easier to update styles across an entire project
• Programs that generate CSS from the preprocessor's unique syntax

Example SASS with variables and nesting:

<pre><code>$primary-color: #3498db; $border-radius: 5px; .button { background-color: $primary-color; border-radius: $border-radius; &:hover { background-color: darken($primary-color, 10%); } }</code></pre>

Syntactically Awesome Style Sheets (SASS)

SASS enables developers to write more efficient, modular, and maintainable code by introducing variables, nested rules and mixins.

• Allows developers to create modular and DRY styles that are reusable

CSS methodologies (BEM, SMACSS, OOCSS)

Enforce structure and prevent naming conflicts in large projects. Ensures organised, reusable and scalable CSS.

Formal, documented systems for writing CSS and managing the front end as a set of small, isolated modules.

Example BEM (Block Element Modifier):

<pre><code>.button { } .button__text { } .button--primary { } .button--primary:hover { }</code></pre>

CSS in JS (styled components, Emotion.JS)

Seen in React applications, where CSS is written directly in JS.

• Allows for dynamic styling and reduces global conflicts

Example:

<pre><code>const ButtonStyle = styled.button` background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; &:hover { background-color: #2980b9; } `;</code></pre>

The Utility-first framework, Tailwind CSS

Provides a large set of utility classes designed for rapid and consistent styling in HTML.

• More efficient and consistent, and minimises need for custom CSS

Example:

<pre><code><button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"> Click Me </button></code></pre>