The document discusses best practices for organizing and structuring CSS code, including: 1. Using inheritance, cascading, and specificity principles to determine which styles take precedence. 2. Avoiding inline styles, <br> tags for spacing, &nbsp; for empty elements, and tables for layout as they harm semantics and structure. 3. Preferring class names over IDs due to lower specificity, and using flexbox, grid, rem/em units, and preprocessing with LESS/Sass for modularity and responsive design.

1. by Mike Wilcox, June 2016
Dangerous CSS
CLUB AJAX

3. Inheritance vs Cascade
• Inheritance refers to to what the style of the element will be based on its parent
elements
• Adding font-family: Arial; will apply that sale to all elements of the page, unless the element
specifies its own, overridng style

4. Inheritance vs Cascade
• Cascade refers to what the style of the element will be based on the definitions
in (potentially) many places:
• Browser default styles
• User defined styles
• Author styles
• External file
• In the document, using a style element
• On an specific element, using the style sttribute

5. Specificity
• What is the background color of the following element?
<div id="content" class="myContent" custom="true" style="background: white;">
This is my content
</div>
div{ background: yellow; }
.myContent{ background: darkred; }
div:first-child-of-type{ background: blue; }
#content{ background: black; }
div[custom="true"]{ background: orange; }
1
2
3
4
5
6
https://css-tricks.com/specifics-on-css-specificity/

6. Don’t Try These Things at Home…

7. Inline Styles
• Don’t: <div style=“width: 18px; color: #000;”>My Content</div>
• Breaks separation of concerns
• In frameworks, code must be rebuilt to see changes
• Specificity is way too high for general styling
Instead:
• All styles should go in a style sheet

8. BR
• Do not use <br> to increase the gap between lines of text
• it's not semantic. If you want two items, you probably want different elements
• It is an attempt at styling via markup
• Browsers will give different results
Instead:
• Use margins to separate elements
• Use <p> or <div> or other block styled element

9. &nbsp;
• In HTML, elements containing nothing but whitespace is considered empty and
have zero height
• An "empty" paragraph has zero height, so its vertical margins will collapse
• The space taken will depend on font size
Instead:
• Use padding to take up space
• Use margins to separate elements

10. IDs
• Styling IDs is overly specific
• IDs are unique, so the style cannot be reused
• NOTE: In JS frameworks, you shouldn’t be using IDs anyway
Instead:
• Use a className

11. Tables (for layout)
• Bad semantics
• Tables are for tabular data
• Often one table is not enough - nested tables are a nightmare
• a11y - Tables do not work well with screen readers
• Does not work well with RWD
Instead:
• Use best practices

12. Floats
• Designed to support magazine style layouts where text floats around the image
• Causes unwanted bugs or unpredictable side effects
Instead:
• Use inline-block, absolute positioning, or flex-box

13. Images
• Seriously, NO IMAGES!
• Images don’t scale
• Say goodbye to your image sprites
Instead:
• Use font icons or SVG
• SVG can be styled

14. Do These…

15. block vs inline vs inline-block
• inline has no dimensions. It takes the size of its contained text
• width, height, margin has no affect
• padding works since it is part of the contained text
• inline-block allows for dimensions
• By default, is the size of contained text
• supports vertical-align
• block allows for dimensions
• Creates a new line (don’t use <br>!!)
• Cannot be a child of a <p>
• By default, width is “auto”, sized to its container
• “auto” !== 100%

16. REM & EM
• px is a fixed width
• em is relative to its container size
• body{ font:10px} / body div{ font:0.5em} [5px] / body div div{ font:0.5em} [2.5px]
• rem is relative to root size
• body{ font:10px} / body div{ font:0.5em} [5px] / body div div{ font:0.5em} [5px]
• Use px for dimensions and borders
• Use a combination of em and rem for text, borders, and margins
• em works best for media queries
• Test all browsers - Safari is buggy
http://zellwk.com/blog/media-query-units/

17. flex-box
• The flexbox layout is direction-agnostic as opposed to the regular layouts: block
which is vertically-based and inline which is horizontally-based.
• Provides flexibility when it comes to orientation changing, resizing, stretching,
shrinking, etc.
• Not intuitive, and difficult to learn (but is worth the effort)
.container{
display: flex;
flex-flow: row wrap;
}
.item {
flex: 1 1 auto;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

18. CSS Grid Layout (NA)
• The solution to layouts
• Works well with flex box
• The spec is still be worked on
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
https://css-tricks.com/snippets/css/complete-guide-grid/

19. Organizing

20. React Inline-styles
• Solves the “problem” of all CSS styles being global
• Is this a problem you even knew you had?
• This will be solved by the Shadow DOM
• Prevents CSS rot of large code bases
• Very likely a problem if you do not practice good modularity
• Already mixing HTML and JS, so, why not?
• While dynamic HTML adds to the spec, the same can not be said for CSS
where functionality such as cascading, inheritance, and reusability is removed
or reduced
Not so much condemning
this approach as much as
expressing concern with
introducing it to our stack

21. LESS - @variables
@primary-color: #6a7280;
@bk: linear-gradient(to bottom, @transWhite, @trans);
@border: 1px solid @primary-color;
@border-alt: none;
.section{
border: @border-alt;
background: @bk;
}

22. LESS - modularity
.widget{
&:focus{
border: 1px solid blue;
}
&.collapsed{
height: 0;
}
.title{
font-weight: bold;
.closeBtn{
.abs-right;
}
}
}
.widget{
display: block;
}
.widget:focus{
border: 1px solid blue;
}
.widget.collapsed{
height: 0;
}
.widget .title{
font-weight: bold;
}
.widget .title .closeBtn{
position: absolute;
right: 5px;
}

23. DEMOS

24. CLUB AJAX