Varya Stepanova @ Aalto University, 2024
Navigating intricate structures and dependencies in extensive projects.
Coordinating work and maintaining consistency across diverse coding styles.
Adapting to changing project needs while preserving code integrity.
Keeping large codebases organized, efficient, and bug-free over time.
H1 { color: blue }
P EM { font-weight: bold }
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
a { /* Affects all the links */
color: red;
}
ul li a { /* Affects all the links in lists */
color: green;
}
Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.
<div id="test">
<span>Text</span>
</div>
div#test span { color: green }
span { color: red }
div span { color: blue }
<div class="sidebar">Left floated sidebar</div>
.sidebar { /* Does it redefine `div.sidebar`?! */
float: right;
}
body .sidebar { /* Overwrites 'div.sidebar {}' */
float: right;
}
.navbar-inverse .navbar-nav>li>a {
color: #999;
}
#home-menu-container #home-menu li a {
color: red;
}
body #home-menu ul li a {
color: blue !important;
}
{: .code--size--m }
#content div div {
float: left;
}
@import url('i-need-this.css');
100 pages in projects
.person div a {
color: pink;
}
Can I remove it? Will it break something? Maybe it is for a third-party HTML code?
This is not hard in CSS | This is! |
---|---|
|
|
Messy code with direct element selection and modification.
Difficult management of multiple event listeners and callbacks.
Lack of centralized state leading to inconsistent UI updates.
Spaghetti code without clear structure, making updates risky.
Difficulty understanding complex, intertwined code over time.
Fear of breaking unknown dependenciesч when making changes.
Similar components diverge, leading to maintenance nightmares.
Growing projects become increasingly difficult to manage and expand.
Dividing interfaces into reusable, independent components.
Bundling functionality and styling within self- contained units.
Promoting uniform design and behavior across the application.
Easier updates and bug fixes with isolated component logic
Reusability | Easier Testing | Improved Collaboration | Faster Development |
---|---|---|---|
Components can be easily reused across different parts of the application. | Isolated components allow for more straightforward and thorough testing. | Designers and developers can work more efficiently on specific components. | Reusable components speed up the development and iteration process. |
Virtual DOM, JSX syntax
Directives, two-way data binding
Reactivity system, template-based components
Framework-agnostic
Allows you to write CSS directly within JavaScript.
Supports for both string and object styles.
CSS as JavaScript objects, commonly used with React.
Near-zero runtime, lightweight, focus on architecture.
"Design Systems Vocabulary — A Review of Key Terms and Concepts", https://varya.me/blog/design-systems-review/
"Design Systems Vocabulary — A Review of Key Terms and Concepts", https://varya.me/blog/design-systems-review/
"Design Systems Vocabulary — A Review of Key Terms and Concepts", https://varya.me/blog/design-systems-review/
"Design Systems Vocabulary — A Review of Key Terms and Concepts", https://varya.me/blog/design-systems-review/
Design systems are the foundation of consistent user interfaces. They provide reusable components, patterns, and guidelines for creating cohesive products across platforms.
"Design systems" is a systematic approach for creating, implementing, and maintaining user interfaces.
Fundamental design elements like colors, typography, and spacing.
Reusable interface elements such as buttons, forms, and cards.
Recurring solutions for layout structures and interaction patterns.
Usage rules, accessibility standards, and best practices.
|
|
A color palette that includes primary, secondary, and accent colors, along with their various shades and tints. These colors are used consistently across all UI elements to maintain visual harmony.
A set of font families, sizes, weights, and line heights that define the textual hierarchy and readability of the interface. This includes headings, body text, captions, and other typographic elements.
Standardized units of measurement for margins, padding, and layout grids. Consistent spacing ensures proper alignment and visual rhythm throughout the interface.
Interactive elements that trigger actions or navigate users to different parts of the application.
Input fields, checkboxes, and other elements that allow users to enter and submit data.
Containers for presenting related information in a compact and visually appealing format.
Menus, breadcrumbs, and other elements that help users move through the application.
Standardized arrangements of UI elements, such as grid systems and responsive layouts, that ensure consistency across different screen sizes and devices.
Common user behaviors and expectations, like hover effects, drag-and-drop functionality, and scrolling behaviors, that are implemented consistently throughout the interface.
Guidelines for presenting complex information in easily digestible formats, including charts, graphs, and infographics.
Consistent approaches to displaying and resolving errors, including form validation, error messages, and recovery options.
Clear instructions on when and how to use specific components and patterns, including do's and don'ts to maintain consistency and effectiveness.
Detailed requirements for ensuring that all UI elements are accessible to users with disabilities, including color contrast ratios, keyboard navigation, and screen reader compatibility.
Principles for adapting layouts and components to different screen sizes and devices, ensuring a consistent experience across platforms.
Guidelines for maintaining a consistent brand personality in all textual elements, including microcopy, headings, and error messages.
Master thesis in International Design Business Management (IDBM)
by Varya Stepanova, Aalto University, 2021
Products are systems rather than pages and as soon as we stop perceiving them as that, the better.
Figma, Sketch, Zeplin
Storybook, Zeroheight, Confluence, Notion
Style Dictionary, Supernova
Storybook, Bit.dev
Chromatic, Testplane, Jest
The very fact of design systems emerging as a new approach and a set of artifacts that affect the process of development demonstrates the subject of Organizational Innovation and Deployment.