# Dynamic CSS Components Without JavaScript

DevFeed: [Dynamic CSS Components Without JavaScript](<https://devfeed.tech/articles/dynamic-css-components-without-javascript-31223.md>)

Original publisher: [Read original article](<https://every-layout.dev/blog/css-components/>)

Author: Heydon Pickering

Published: 2019-10-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [The Every Layout Blog](<https://devfeed.tech/sources/the-every-layout-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [ui](<https://devfeed.tech/topics/ui.md>), [HTML](<https://devfeed.tech/topics/html.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [server-side-rendering](<https://devfeed.tech/tags/server-side-rendering.md>), [ui](<https://devfeed.tech/tags/ui.md>), [web-interface](<https://devfeed.tech/tags/web-interface.md>)

## AI overview

The article compares web interface components with electronic components, explaining how props influence rendered HTML. It then proposes CSS components based on a shared styling module with configurable values, while noting that the described approach still relies partly on JavaScript and server-side rendering.

## Source excerpt

What is a component? In electronics, it's a discrete device used to affect the behavior of the electricity in a circuit, or electrical system. Electronic components are modular, and are often used in combination to achieve specific values. For example, a number of resistor components of different values might be used in series to produce a desired resistance. Electronic components take an input, augment it internally, and return a different output. In this respect, the only real conceptual difference between electronic components and web interface components is that the former passes the signal along, and the latter passes it down. Props Whether you are using React, Vue, custom elements, or some other component-organized system, inputs tend to be passed to the component via props (properties). The property names/identifiers belong to the component; the values of the properties belong to a containing (ancestor) component and its current state. A UI component outputs (using a return statement in JavaScript) some UI, and the shape this UI takes is, at least partially, beholden to the values of the props originally passed. Like resitors augment the current, UI components augment the interface. Rendering On the web, the UI a component outputs consists of markup/HTML. The structure of that HTML will differ depending on how the current values of its props are interpolated. For example, if a hypothetical users prop consisted of an array of 726 users in its current state, the following render function would output an unordered list of 726 users. Array of 891; list of 891. const render = () => { return `<ul> ${prop.users.map(user => ` <li>${user.name}</li> `).join('')} </ul>` } What's neat is that I have a single component, as one module definition, that can be instantiated under differing circumstances and produce different outcomes. For example, I might use the same component just to display logged in users. All that has to change is the input: the value of the users prop.