Cascading Style Sheets

3 min read, 544 words csswebtechnologystandard

Scoped CSS

Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit.

Difference b/w scoped and unscoped CSS?^[1]

scoped CSS

Use it wisely, only when its really needed. Generalize most of the styles. Scope only the specific styles.

css compile time

CSS Frameworks

Types

1. Javascript based. bootstrap (opens new window)
2. CSS only based. w3.css (opens new window), bulma (opens new window)

Why use them in the first place?

1. Easier to work with responsive designs

CSS Framework size comparision

• https://cssfs.dev/sizes.html (opens new window)
• https://github.com/duongphuhiep/duongphuhiep.github.io/wiki/CSS-Framework-SIZE-comparison (opens new window)
• https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee07949215ad4 (opens new window)

CSS Framework	Gzipped Size (KB)	Remark
Vuetify (opens new window)	151	js based
Bulma (opens new window)	27	css only based, no js
Bootstrap (opens new window)	15	css + js based
w3.css (opens new window)	5	pure css

bundlephobia (opens new window)

Bulma

navigation, typography, boxes, grid system, forms, tables , etc

• HTML tags do not have any effect, CSS classnames controls all styles
• .block .title .subtitle - no padding
• is-small, is-medium, is-large
• .button, .is-primary, is-info, is-inverted, .is-outlined, is-hovered, is-loading, is-active
• .box has padding .notification
• button.delete - cross button on top right
• .tag .icon
• .message .message-header .message-body
• .nav-left|centre|right .nav-item set .is-active to make nav expand on smaller devices
• .menu .menu-label .menu-list
• .hero .hero-body
• .card .card-content .card-footer .card-footer-item
• .pagination .pagination-previous .pagination-next .pagination-list
• For blog post .level .level-left .level-item .field .control
• Forms .label .input .select .textarea Attched .field .has-addons .control > .button
• Grid system: .column
• Bulma cheatsheet (opens new window)

CSS Architectures

Define and implement consistent, maintainable and scalable css architecture

CSS State Machines ?

Year	css Timeline
2009	object oriented CSS - layout styles vs visual styles / skins
2010	responsive web design term was coined
2011	bootstrap hit the market

• Elements in HTML are object-oriented
• Layout components , Skin components, parent child components
• UI components get rendered inside Layout components
  • Size agnostic components, no harcoding for heights and widths
• { Modifiers } x { Behaviour } x { Pseudo State CSS }
  • How to cancel out illegal, undesired combinations?
• LayoutComponnets (only styles), Components (only UI elements), ContainerComponents (only logic)

<Component css={
  modifier={"light"},
  behaviour={"pressed"}
  }
/>

const modifiers = {
  light: {
    color: '#777',
    --pressed-color: '#333'
  }
}

const behaviours = {
  pressed: {
    color: 'var(--pressed-color, #777)',
  }
}

export const style = ({modifier, bahaviour}) => ({
  fontSize: 1em,
  ...modifiers[modifier],
  ..behaviours[behaviour]
})

1. How many UI states can a component have?
2. How can you easily validate these states?
3. How ergonomic are your styles?
4. Are you creating sensible abstract building blocks?
5. Are you seperarting layout from visual styles when appropriate?
6. Are you seperating application logic?
7. How do we give semantic meaning to compoentns?
8. Frontend architecture (opens new window)

Subscribe to our Newsletter

If you like my work and think it was helpful kindly support my work

---

1. https://stackoverflow.com/questions/46173945/difference-between-scoped-css-and-scope-by-adding-a-parent-class (opens new window) ↩︎