1

Applying "the beer way" in css?

 2 years ago
source link: https://dev.to/leonardorafael/applying-the-beer-way-in-css-2cip
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Hello my friends,

This is an approach used in beercss project. It's not a pattern but It's a guide to learn it. Thoughts?
https://github.com/beercss/beercss
https://www.beercss.com

Applying "the beer way" in css?

This project was guided by the "Germany Beer Purity Law" or "Reinheitsgebot" created in 1956. This law states that beer should only be brewed with the following ingredients: water, barley malt and hops. Only 3 ingredients. Exciting, right? So we thinking about It and our 3 ingredients are: settings, elements and helpers. This sounds weird at first time, because It's not BEN, OOCSS, SMACSS, ITCSS, "Utility first" or any other approach. Our approach doesn't avoid some bad practices, but is lightweight, tasty and pure like a beer. Just try it and feel it! 😁

|  SETTINGS     |       // The settings affects all document
|---------------|----|
|               |    |
|  ELEMENTS     |    |  // The elements are the components, widgets or tags
|               |    |
|---------------|    |
|               |    |
|               |    |
|  HELPERS      |----|  // The common helpers makes the elements more scalable and customizable
|               |
|               |
|---------------|
Enter fullscreen modeExit fullscreen mode
// 1 setting to 1 document
<html class="settings">...</html>

// 1 element to N helpers
<element class="helper helper">...</element>
<div class="element helper helper">...</div>

// apply css rules like this
.element > .helper
Enter fullscreen modeExit fullscreen mode

DON'T: 

// N elements to 1 tag
<div class="element element helper">...</div>

// avoid dependencies
<div class="element">
  <div class="element-header">...</div>
  <div class="element-content">...</div>
  <div class="element-footer">...</div>
</div>

// apply css rules like this
.element .helper
.element .element-header
.element .element-content
.element .element-footer
Enter fullscreen modeExit fullscreen mode

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK