Separation of concerns

As explained in Tiny CSS Projects

Separation of concerns is a software design principle that divides a system into distinct sections with separate purposes.

Separation of concerns divides a program into distinct sections, each organized around a different purpose. On a web page, HTML supplies structure and content, CSS supplies presentation, and JavaScript supplies additional functionality. Keeping these responsibilities apart reduces duplication and makes code easier to maintain, extend, and test. section 1.1.1

A separated web implementation gains several practical advantages:

• Centralizing styles in an external CSS file lets one change apply across multiple HTML pages. section 1.3.3
• Avoiding repeated inline declarations keeps content and presentation from becoming tightly coupled. section 1.3.1
• Separating responsibilities supports maintainability, extensibility, stability, and easier testing. section 1.1.1

External CSS in HTML

Keep the document focused on content and link presentation from a separate file: <link rel="stylesheet" href="styles.css">. By contrast, <h1 style="color: crimson">Title of our article</h1> places styling directly beside content and becomes difficult to manage when repeated across many elements. section 1.3.3 section 1.3.1

Figure 1.1 A breakdown of a web page

Use the page breakdown to see how HTML, CSS, and JavaScript divide responsibility within a web page. section 1.1.1

How Tiny CSS Projects covers it

How deep it goes

Explains the principle, benefits, and external-versus-inline CSS trade-offs without descending into detailed architecture or testing procedures.

Examples

Uses a crimson heading, repeated paragraph styling, an external stylesheet link, and a diagram of web-page responsibilities.

What it assumes

Assumes basic HTML familiarity while defining CSS, JavaScript, inline styles, and external stylesheet linking in context.

What you can do after

Apply it via external stylesheets to reduce repetition and maintain consistent presentation across HTML pages.

How it connects

Connects HTML, CSS, JavaScript, inline CSS, external stylesheets, responsive design, and adaptive design.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Practices of the Python ProA software design technique that organizes a system so each part addresses a distinct concern and dissimilar concerns remain isolated.
• 

  liveBookmanning.com
  A Pythonic Adventure: From Python basics to a working web appSeparation of concerns is a software design principle that divides a system into components with distinct responsibilities.
• 

  liveBookmanning.com
  C++ Concurrency in Action, Second EditionSeparation of concerns is a software design principle that organizes a system so distinct concerns are handled independently.
• 

  liveBookmanning.com
  Machine Learning Platform EngineeringSeparation of concerns is a software design principle that isolates distinct responsibilities into separate components or layers.
• 

  liveBookmanning.com
  Coding with AISeparation of concerns is a design principle that assigns distinct responsibilities to separate software components so they do not overlap unnecessarily.
• 

  liveBookmanning.com
  Build Python Web Apps with StreamlitSeparation of concerns is a software design principle in which distinct components focus on distinct responsibilities and interact through controlled interfaces.
• 

  liveBookmanning.com
  ASP.NET Core in Action, 3eSeparation of concerns is a design principle that isolates distinct aspects of an application so each can change with minimal impact on the others.
• 

  liveBookmanning.com
  Akka in Action, Second EditionSeparation of concerns is the division of software into parts whose responsibilities are distinct and independently manageable.
• 

  liveBookmanning.com
  The Art of CodeSeparation of concerns is a design technique that divides software into parts responsible for distinct concerns so that each can change more independently.
• 

  liveBookmanning.com
  Functional Design and Architecture: Examples in HaskellSeparation of concerns is a design principle that isolates distinct responsibilities so they can be understood and changed independently.
• 

  liveBookmanning.com
  Building Web APIs with ASP.NET CoreSeparation of concerns is a design principle that partitions a system so distinct responsibilities are handled independently.
• 

  liveBookmanning.com
  Build AI-Enhanced Web AppsSeparation of concerns is a software design principle that divides a system into parts with distinct responsibilities.
• 

  liveBookmanning.com
  Build and Orchestrator in Go (From Scratch)Separation of concerns is a software design principle that assigns distinct responsibilities to separate components or modules.
• 

  liveBookmanning.com
  AI Agents in Action, Second EditionSeparation of concerns is a software design technique that isolates distinct responsibilities so they can be developed and changed independently.
• 

  liveBookmanning.com
  The Creative ProgrammerSeparation of concerns is the organization of a system so that distinct responsibilities or decision criteria remain independently managed.
• 

  liveBookmanning.com
  Authorization in ActionSeparation of concerns is a design principle that divides a system into parts with distinct responsibilities and limited overlap.
• 

  liveBookmanning.com
  React Quickly, Second EditionSeparation of concerns is a design principle that isolates distinct responsibilities so each part of a system handles a focused concern.
• 

  liveBookmanning.com
  Elixir in Action, Third EditionSeparation of concerns is a design technique that divides a system into components with distinct responsibilities.
• 

  liveBookmanning.com
  Learn Go with Pocket-Sized ProjectsSeparation of concerns is a design principle that assigns distinct responsibilities to separate software components.
• 

  liveBookmanning.com
  Rust Servers, Services, and AppsSeparation of responsibilities is a design principle that assigns distinct concerns to different software components.
• 

  liveBookmanning.com
  Python Concurrency with asyncioSeparation of concerns is a design technique that gives distinct responsibilities to separate components or computations.

Compare how 22 books explain separation of concerns →

Related concepts

• concernuses · A concern is a distinct responsibility, requirement, or aspect of behavior that a software system must address.
• single responsibility principleimplements · The single responsibility principle is a software design principle that gives a component one focused responsibility and one primary reason to change.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.