The definition and role of CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML or XML documents. It controls the layout, colors, fonts, and other visual aspects of web pages, achieving the separation of content and presentation.

Basic Definition of CSS

CSS stands for Cascading Style Sheets and is developed and maintained by the W3C. It defines style rules through the structure of selectors and declaration blocks:

selector {
  property: value;
  /* This is a CSS comment */
}

The cascading nature of CSS is reflected in three aspects:

1. Priority of style sources (user agent styles, author styles, user styles)
2. Selector specificity calculation
3. Order of code appearance

Core Functions of CSS

Separation of Content and Presentation

In traditional HTML, styles were written directly on elements:

<!-- Old-style writing -->
<h1 style="color: red; font-size: 24px;">Title</h1>

CSS separates them into:

<!-- HTML -->
<h1 class="main-title">Title</h1>

/* CSS */
.main-title {
  color: red;
  font-size: 24px;
}

Page Layout Control

CSS provides multiple layout methods:

Float Layout

.float-left {
  float: left;
  width: 30%;
}
.float-right {
  float: right;
  width: 70%;
}

Flexbox Layout

.container {
  display: flex;
  justify-content: space-between;
}
.item {
  flex: 1;
}

Grid Layout

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Responsive Design

Achieved through media queries:

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .main-content {
    width: 100%;
  }
}

CSS Selector System

Basic Selectors

/* Element selector */
p { color: blue; }

/* Class selector */
.error { color: red; }

/* ID selector */
#header { background: #333; }

Combinator Selectors

/* Descendant selector */
article p { line-height: 1.6; }

/* Child selector */
ul > li { list-style: none; }

/* Adjacent sibling selector */
h2 + p { margin-top: 0; }

Pseudo-classes and Pseudo-elements

/* Link states */
a:hover { text-decoration: underline; }

/* First letter */
p::first-letter { font-size: 150%; }

CSS Box Model

The standard box model consists of content area, padding, border, and margin:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box; /* Switch box model calculation method */
}

CSS Animations and Transitions

Transition Effects

.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #4CAF50;
}

Keyframe Animations

@keyframes slidein {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.slide-element {
  animation: slidein 1s forwards;
}

CSS Preprocessors

Sass Example

$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

.button {
  @include border-radius(5px);
}

CSS Custom Properties

:root {
  --main-bg-color: #f5f5f5;
}

.container {
  background-color: var(--main-bg-color);
}

CSS Modularization

CSS modules in modern frontend frameworks:

/* Button.module.css */
.primary {
  background: var(--primary-color);
  padding: 0.5rem 1rem;
}

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click</button>;
}

CSS Performance Optimization

Selector Optimization

/* Not recommended */
div.container ul.nav li a { ... }

/* Recommended */
.nav-link { ... }

Avoiding Reflows and Repaints

/* Use transform instead of top/left */
.animate {
  transform: translateX(100px);
}

CSS and Accessibility

/* Hide content but keep it accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Future Developments in CSS

Container Queries

@container (min-width: 500px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Nesting Syntax

.card {
  padding: 1rem;

  &__title {
    font-size: 1.2rem;
  }
}