front-end designer
at
front-end
at
Cascade and inheritance
The order of CSS rules matter
initial | inherit | unset
h1 {
color: black;
}
* {
color: red;
}
Example
Heritage
1/2
html {
color: black;
font-size: 16px;
}
.nav .body-text {
color: red;
margin-right: 1em;
}
Example
html {
color: black;
font-size: 16px;
}
.nav .body-text {
color: red;
font-size: 16px;
margin-right: 1em;
}
Computed
Heritage
1/2
Specificity
determines which CSS rule is applied by the browsers.
0 | 0 | 0 | 1
element {}
::pseudo-element {}
0 | 0 | 1 | 0
.class {}
[attribute] {}
:pseudo-class {}
0 | 1 | 0 | 0
#id {}
1 | 0 | 0 | 0
property: !important;
style="property: in-line;"
0 | 0 | 0 | 0
>, +, *, ~, :not()
@media
Specificity Graph
Specificity
Location in stylesheet
-
Sass nesting.
-
Class concatenation.
-
Using ID's.
-
Inline styles.
-
!important.
Keep specificity levels low
In order to avoid cascade problems.
body {
&.header {
&.nav {
ul {
li {
a#link {
color: red !important;
}
}
}
}
}
}
body.header.nav ul li a#link {
color: red !important;
}
1 | 1 | 2 | 4
Keep specificity levels low
Specificity shame
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="frankestein">
Igor
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
0 | 0 | 1 | 0
.frankestein {
color: green;
}
div div div div div div div div div div div div {
color: red;
}
HTML
CSS
class specificity
0 | 0 | 0 | 12
div's specificity
!important
Adding !important to a declaration is the same as declaring all of its sub-properties as !important.
.card {
margin: 1em !important;
}
.card {
margin-bottom: 1em !important;
margin-left: 1em !important;
margin-right: 1em !important;
margin-top: 1em !important;
}
=
Naming conventions
Naming CSS is really hard
Naming CSS classes
Separation of Concerns: CSS that depends on HTML.
-
Naming your classes based on your content .author-bio treats your HTML as a dependency of your CSS.
- In this model, your HTML is restyleable, but your CSS is not reusable.
1/4
Mixing Concerns: HTML that depends on CSS.
-
Naming your classes in a content-agnostic way after the repeating patterns in your UI
.media-card treats your CSS as a dependency of your HTML.
- In this model, your CSS is reusable , but your HTML is not restyleable.
2/4
Naming CSS classes
.user-card__portrait {}
.nav ul li a img {}
.card
.btn, .btn--primary, .btn--secondary
.badge
.card-list, .card-list-item
.img--round
.modal-form, .modal-form-section
3/4
Naming CSS classes
Functional class: names (best ones) based on its content or on its presentation.
.positive-button {}
Content-based: class names as your site grows they’re not good for style reuse.
.submit-button {}
Presentational: class names are very self-describing.
.green-button {}
4/4
Naming CSS classes
Naming Sass variables
- Avoid using color names
- Use six hexadecimal values
- Use lowercase hexadecimal
BEM
<button class=“btn btn--secondary”>
Purchase
</button>
.btn {
display: inline-block;
color: blue;
}
.btn--secondary {
color: green;
}
<button class=“btn--secondary”>
Purchase
</button>
.btn--secondary {
display: inline-block;
color: green;
}
- Communicates purpose or function.
- Communicates component structure.
- Sets a consistent low-level specificity for styling selectors
Bloc | Element | Modifier
Advantages
Disadvantages
Low specificity
Dirty HTML
BEM
Bloc | Element | Modifier
- o-: object
- c-: component
- u-: utility class
- t-: theme
- s-: context or scope
- is-, has-: state (SMACSS)
- _: hack
- js-: JavaScript
- qa-: quality assurance
Namespaces
Dissecting CSS classes
.frnk-js-btn--primary {}
- .frnk-: brand prefix {}
- js-: JavaScript behavior {}
- .btn: class {}
- --primary: modifier {}
Architectures
Preprocessor agnostic
Why use an Architecture?
-
Scalability
-
Lack of documentation
- Lack of structure, quality assurance
- Lack of knowledge (about CSS or the project itself)
- Different styles, preferences, ways of working (linterns)
- Adding new styles to the end of stylesheets
OOCSS object oriented CSS
Good: reducing the amount of code by reusing it (DRY principle).
Bad: complex support.
When you change the style of a particular element, you will most likely have to change not only CSS (because most classes are common), but also add classes to the markup.
.nav {
margin-left: auto;
margin-right: auto;
padding-bottom: 1em;
padding-top: 1em;
}
.foo {
margin-left: .5em;
margin-right: .5em;
padding-bottom: 1.2em;
padding-top: 1.2em;
}
.gmail {
border-style: solid;
border-color: red;
border-width: 1px;
}
.nav {
border-style: solid;
border-color: red;
border-width: 1px;
margin-left: auto;
margin-right: auto;
padding-bottom: 1em;
padding-top: 1em;
}
.foo {
border-style: solid;
border-color: red;
border-width: 1px;
margin-left: .5em;
margin-right: .5em;
padding-bottom: 1.2em;
padding-top: 1.2em;
}
Separate structure and skin
OOCSS object oriented CSS
h3 {
color: red;
font-family: 'Lato';
font-size: 16px;
}
.text-bold {
font-weight: 900;
}
.nav h3 {
color: red;
font-family: 'Lato';
font-size: 16px;
font-weight: 900;
}
.foo h3 {
color: red;
font-family: 'Lato';
font-size: 16px;
}
Separate container and content
OOCSS object oriented CSS
SMACSS
Base: applies to HTML, no class/ID selectors.
Layout: big page sections.
.header, .sidebar, .footer
Module: encapsulation modules, re-usable.
State: overrides defaults.
.is-opened, .is-active
Theme
Scalable and Modular Architecture for CSS
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
| …
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| …
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| …
|
1/2
7-1 pattern
|
|– layout/
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| …
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| …
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| …
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| …
|
`– main.scss # Main Sass file
2/2
7-1 pattern
ITCSS inverted triangle CSS
1/3
sass/
|
|– settings/
| |– _config.scss # Project-level config
| |– _core.scss # Core setup
| |– _global.scss # Variables
| …
|
|– tools/
| |– _font-size.scss # Baseline mixin
| |– _clearfix.scss # Clearfix mixin
| |– _hidden.scss # Hidding mixin
| …
|
|– generic/
| |– _box-sizing.scss # Default `box-sizing`
| |– _normalize.scss # Normalize.css vendor
| |– _reset.scss # A tiny reset
| …
|
|– elements/
| |– _page.scss # Global `font-size` & `line-height`
| |– _headings.scss # Default styles for headings
| |– _images.scss # Default images styles
| …
|
ITCSS inverted triangle CSS
2/3
|
|– objects/
| |– wrapper.scss # Page constraint object
| |– layout.scss # Generic layout module
| |– media.scss # Content side by side
| …
|
|– components/
| |– _buttons.scss # Default buttons styles
| |– _nav.scss # Default nav styles
| …
|
|– vendor/ (this folder is not mean to be used in ITCSS)
| |– _bootstrap.scss # Bootstrap
| …
|
|– utilities/
| |– _widths.scss # Widths helper classes
| |– _headings.scss # Headings helper classes
| |– _spacings.scss # Spacings helpe classes
| …
|
`_all.scss
ITCSS inverted triangle CSS
3/3
Tips & Tricks
- DRY: Don't repeat yourself
- KISS: Keep it Simple Stupid
- YAGNI: You "Ain't Gonna Need It”
- SR: Single Responsibility
- OS: Open-Close objects (are open to extension but closed to modification)
Principles
Software Design Principles
- The Broken Window Theory.
- Don't leave automatizations decide for you.
- @imports order are !important.
- Use of token variables.
Recommendations
- Reduce means writing the shortest chain of elements possible in selectors.
- Reusing involves creating generic classes instead of overly specific ones.
- Recycling involves better leveraging the cascade to cut down on redundant style declarations.
Reduce, Reuse & Recycle
- Place comments on a new line above their subject.
- Keep line-length to a sensible maximum , e.g., 80 columns.
- Make liberal use of comments to break CSS code into discrete sections.
- Use "sentence case" and consistent text indentation.
/// Make a context based selector a little more friendly
/// @author Hugo Giraudel
/// @param {String} $context
@mixin when-inside($context) {
#{$context} & {
@content;
}
}
CSS order
Comments
- When multiple classes uses the same property, use one line for each.
.frnk-js-btn--primary,
.frnk-js-btn--secondary,
.frnk-js-btn--tertiary {
font-family: 'Lato';
}
CSS order
Declarations
- Positioning
- Display & Box Model
- Color
- Text
- Other
- @extend
- @include
- Media queries
- Modifiers
- Parent selectors
- States
- @extend
- @include
- Media queries
- Modifiers
- Parent selectors
- States
.body-text {
border-color: red;
border-style: solid;
border-width: 1px;
padding-left: 20px;
padding-right: 20px;
z-index: 666;
}
CSS order
By type
Alphabetically
// Buttons can be applied to any HTML element that is used to trigger a user
// action (e.g. following a call to action link, submitting a form).
//
// 1. Line differently sized buttons up a little nicer.
.btn,
.link {
// Avoid @extends: creates unnecesary CSS
@extend .text;
@include fluid-font();
color: red;
vertical-align: middle; /* [1] */
@media (min-width: 64em) {
color: pink;
}
&--secondary {
width: 100%;
}
.nav & {
margin-left: auto;
}
&.is-disable {
opacity: .5;
}
}
CSS order
- Using a large number of font-size.
- !important should only ever be used proactively, not reactively.
- CSS should be location independent.
- Styling HTML elements.
- Qualified selectors.
- Nesting more than 3 levels.
- Undoing styles.
- Magic numbers (27px).
- @extend
- Limit string concatenation for classes
Architecture smells
Resources
Thanks
Any Question?
Codemotion 2017 | CSS Architectures
By Carmen Ansio
Codemotion 2017 | CSS Architectures
Slides for CSS architectures codemotion2017
- 831