Download - Architecture for css
![Page 1: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/1.jpg)
Architecture for CSSMohamed Amin
![Page 2: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/2.jpg)
Table1. Intro2. OOCSS3. SMACSS4. Adjacent Approaches
a. Dry Cssb. Css For GrownUps
5. Summary
![Page 3: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/3.jpg)
Intro <div class="box1"> <h3>Heading</h3> <img src="pic" /> <p>Blah Blah Blah Blah ..</p> <a href="url">more</a> </div><div class="box2"> <h3>Heading</h3> <img src="pic" /> <p>Blah Blah Blah Blah ..</p> <a href="url">more</a></div>
#box1{ width: 200px; height: 200px; background: red; border: solid 1px green; margin: 10px; padding: 10px;}#box2{ width: 200px; height: 200px; background:blue ; border: solid 1px yellow; margin: 10px; padding: 10px;}
![Page 4: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/4.jpg)
Intro <div class="box1"> <h3>Heading</h3> <img src="pic" /> <p>Blah Blah Blah Blah ..</p> <a href="url">more</a> </div><div class="box2"> <h3>Heading</h3> <img src="pic" /> <p>Blah Blah Blah Blah ..</p> <a href="url">more</a></div>
#box1{ width: 200px; height: 200px; background: red; border: solid 1px green; margin: 10px; padding: 10px; } #box1 h1{ font-size: 30px; color: white; } #box1 p{ font-size: 18px; color: yellow; } #box1 a{ font-size: 12px; color: blue; }
![Page 5: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/5.jpg)
OOCSSObject-Oriented CSSNicole Sullivanhttps://github.com/stubbornella/oocss/wiki
![Page 6: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/6.jpg)
OOCSSWhat’s a CSS Object?
Basically, a CSS “object” is a repeating visual pattern, which can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. Once created, an object can then be reused throughout a site.
![Page 7: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/7.jpg)
OOCSSWhat’s a CSS Object?
Basically, a CSS “object” is a repeating visual pattern, which can be abstracted
into an independent snippet of HTML, CSS, and possibly JavaScript. Once
created, an object can then be reused throughout a site.
![Page 8: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/8.jpg)
OOCSSFACEBOOK
HTMLBYTES/PAGE
-44%
CSSBYTES/PAGE
-19%
![Page 9: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/9.jpg)
Signs That you Need OOCSS● Alot Of floats● Alot Of specific Margins● Alot of Font Size & !important
![Page 10: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/10.jpg)
What To Do ? That you Need OOCSS● Apply Dry Css● Separate Structure form Styling● Modularize
![Page 11: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/11.jpg)
OCSS's DO's :● Use Css Grid● Keep selectors chain short● Style Classes rather than elements
![Page 12: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/12.jpg)
OCSS's Don'ts● Avoid attaching classes to elements in selectors ● Avoid using ID's As styling hock● Avoid descendent selectors● Avoid Class names that are related to the appearance of style (
blue , red instead use primary-color , secondary color )
![Page 14: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/14.jpg)
SMACSSCategorizing The Css :1. Base2. Layout3. Module4. State5. Theme
![Page 15: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/15.jpg)
SMACSSBASEare the defaults. They are almost exclusively single elementselectors but it could include attribute selectors, pseudo-classselectors, child selectors or sibling selectors. Essentially, a basestyle says that wherever this element is on the page, it should looklike this.
Reset Css : Normailze
![Page 16: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/16.jpg)
SMACSSLayout divide the page into sections. Layouts hold one ormore modules together.
![Page 17: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/17.jpg)
SMACSSModulesare the reusable, modular parts of our design. They arethe Icons, the sidebar sections, the product lists and so on.
![Page 18: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/18.jpg)
SMACSS Modules Candidates● Navbar● Carousels● Dialogs● Widget● Tables● sidebar
![Page 19: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/19.jpg)
SMACSSState are ways to describe how our modules or layouts willlook when in a particular state.
![Page 20: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/20.jpg)
SMACSSTheme rulesare similar to state rules in that they describehow modules or layouts might look. Most sites don’t require a layerof theming but it is good to be aware of it.
![Page 21: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/21.jpg)
SMACSS What To DO
Minimizing the Depth:The problem with such a depth is that it enforces a much greaterdependency on a particular HTML structure. #sidebar div, #footer div {border: 1px solid #333;}#sidebar div h3, #footer div h3 {margin-top: 5px;}#sidebar div ul, #footer div ul {margin-bottom: 5px;}
.pod {border: 1px solid #333;}.pod > h3 {margin-top: 5px;}.pod > ul {margin-bottom: 5px;}
![Page 22: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/22.jpg)
SMACSS What To DO
Use child selectors to increase reusability:css get evaluated from right to left , make it less dependant on the parent .
![Page 23: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/23.jpg)
SMACSS What To DO
Multiple Classes for more “senmaticizing” the stateNo shame in using more classes to get more control on the modules in various states ..btn { ... }.btn:hover { ... }.btn:focus { ... }.btn-default { ... }.btn-default:hover { ... }.btn.is-pressed { ... }.btn.is-pressed:hover { ... }.btn-default.is-pressed { ... }.btn-default.is-pressed:hover { ... }
![Page 24: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/24.jpg)
SMACSS What To DO
Selector’s PerformanceConstrain yourself, don’t choke yourself.
With all that said, even these simple optimizations may be overkill.Steve Souders, who works tirelessly on performance testing, examinedthe performance impact of CSS selectors and determined(back in 2009) that the delta between the best case and the worst case was 50ms. In other words, consider selector performance butdon’t waste too much time on it.
![Page 25: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/25.jpg)
Quick Points1. IDs don’t make it a style hock.2. Classes : your friend , make it reusable and
semantic.3. Selectors : Less is More .4. Module : make it every where.5. Naming Conventions
![Page 26: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/26.jpg)
Quick Points1. IDs don’t make it a style hock.2. Classes : your friend , make it reusable and
semantic.3. Selectors : Less is More .4. Module : make it every where.5. Naming Conventions
![Page 27: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/27.jpg)
The Process Minified1. Structure .2. Reduce.3. Reuse.
![Page 28: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/28.jpg)
The Process Minified : Structure1. Utilize Naming conventions to structure and
Meaning.2. Categorizing style into layers and multiple
documents.3. Apply grids and consistent page structure.
![Page 29: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/29.jpg)
The Process Minified : Reduce1. No inline styles.2. use short chain of selectors.3. Drop elements as selectors.4. Classes over IDs.
![Page 30: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/30.jpg)
The Process Minified : Reuse1. Modularize page components to reuse .2. Extend The Module with subclassing
![Page 31: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/31.jpg)
Let’s Do it ...
Demo
![Page 32: Architecture for css](https://reader035.vdocuments.mx/reader035/viewer/2022070515/5878a4fa1a28ab42588b64f7/html5/thumbnails/32.jpg)
Let’s Do it ...