Cascading Style Sheets (CSS) 1. What is CSS? Why CSS? How to write a CSS? 2.
Learn SUIT: CSS Naming Convention
If you can't read please download the document
-
Upload
in-a-rocket -
Category
Internet
-
view
2.209 -
download
3
Transcript of Learn SUIT: CSS Naming Convention
-
inarocket.com
Learn at rocket speed
SUITCSS NAMING CONVENTION
-
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
http://www.inarocket.comhttp://miguelsanchez.com
-
in aROCKET
SUIT FUNDAMENTALSUnderstanding SUIT in just 2 minutes
-
A BEM-based naming convention that helps to scope component CSS and make your widgets render more predictably.
LEARN SUIT: CSS naming conventions
+COMPONENTS UTILITIESDeveloped by Nicholas Gallagher.
SUIT
SUIT comprises:
-
LEARN SUIT: CSS naming conventions
+COMPONENTS UTILITIESSUIT
Within components there can be Modifiers, Descendants and States.
A BEM-based naming convention that helps to scope component CSS and make your widgets render more predictably.
SUIT comprises:
-
LEARN SUIT: CSS naming conventions
COMPONENT
-
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
A component descendent is a class that is attached to a descendent node of a component. It's responsible for applying presentation directly to the descendent on behalf of a particular component.
-
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT + MODIFIER
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
A component modifier is a class that modifies the presentation of the base component in some form.
-
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT + MODIFIER
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT + STATE
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
Use is-stateName to reflect changes to a component's state. Never style these classes directly; they should always be used as an adjoining class.
-
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT + MODIFIER
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT + STATE
Use is-stateName to reflect changes to a component's state. Never style these classes directly; they should always be used as an adjoining class.
-
LEARN SUIT: CSS naming conventions
+COMPONENTS UTILITIESSUIT
Utility classes map to fixed, low-level, structural and positional traits.
A BEM-based naming convention that helps to scope component CSS and make your widgets render more predictably.
SUIT comprises:
-
LEARN SUIT: CSS naming conventions
Certain CSS properties and patterns are used frequently. For example: floats, containing floats, vertical alignment, text truncation.
Utilities: can help to reduce repetition and provide
consistent implementations. can be added to any element; multiple utilities
can be used together; and utilities can be used alongside component classes.
example.css
UTILITIES
Utilities are grouped by type. The names of utilities with similar concerns usually start with a common string, e.g., u-textCenter, u-textTruncate; u-linkClean, u-linkBlock.
SOURCE: SUIT CSS - Utilities.
https://github.com/suitcss/suit/blob/master/doc/utilities.md
-
in aROCKET
QUICK EXAMPLEHow it works with a real example
-
LEARN SUIT: CSS naming conventions
$150 SUBSCRIBE NOW
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
COMPONENT + MODIFIER: important
$150 SUBSCRIBE NOW
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
COMPONENT + MODIFIER: important
$150 SUBSCRIBE NOW $150 SUBSCRIBE NOW
COMPONENT + STATE: is-active
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
COMPONENT + MODIFIER: important
$150 SUBSCRIBE NOW
COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT + STATE: is-active
-
in aROCKET
LET'S CODESUIT syntax you can start using right now
-
SUIT SYNTAX
LEARN SUIT: CSS naming conventions
.ComponentNameMust be written in pascal case. Examples: .MyBtn or .LoginForm
COMPONENTS
-
SUIT SYNTAX
LEARN SUIT: CSS naming conventions
.ComponentNameMust be written in pascal case. Examples: .MyBtn or .LoginForm
.ComponentName-descendentNameMust be written in camel case. Examples: .MyBtn-priceBox or .MyBtn-textBox
$150 SUBSCRIBE NOW
COMPONENTS
DESCENDENTS
-
SUIT SYNTAX
$150 SUBSCRIBE NOW
LEARN SUIT: CSS naming conventions
.ComponentNameMust be written in pascal case. Examples: .MyBtn or .LoginForm
.ComponentName-descendentNameMust be written in camel case. Examples: .MyBtn-priceBox or .MyBtn-textBox
$150 SUBSCRIBE NOW
COMPONENTS
DESCENDENTS
MODIFIERS
.ComponentName--modifierNameMust be written in camel case. Examples: .MyBtn--important
-
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work with this things ;)
PascaL firstCamel secondCamel
-
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work with this things ;)
PascaL
ComponentNameMust be written in pascal case.
-
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work with this things ;)
PascaL firstCamel
ComponentName -descendentNameMust be written in camel case.Must be written in pascal case.
-
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work with this things ;)
PascaL firstCamel secondCamel
ComponentName -descendentName --modifierNameMust be written in camel case. Must be written in camel case.Must be written in pascal case.
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtnstyles.css
/* Component */.MyBtn { styles here }
CSS
index.html
HTML
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
styles.css
/* Component */.MyBtn { styles here }
/* Descendents: depend upon the component */.MyBtn-price { styles here }.MyBtn-text { styles here }
CSS
index.html
$150 Subscribe now
HTML
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
styles.css
/* Component */.MyBtn { styles here }
/* Descendents: depend upon the component */.MyBtn-price { styles here } .MyBtn-text { styles here }
/* Modifier: change style of the component */.MyBtn--important { styles here }
CSS
index.html
$150 Subscribe now
HTML
-
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
styles.css
/* Component */.MyBtn { styles here }
/* Descendents: depend upon the component */.MyBtn-price { styles here }.MyBtn-text { styles here }
/* Modifier: change style of the component */.MyBtn-text--important { styles here }
CSS
index.html
$150 Subscribe now
HTML
-
USEFUL REFERENCES
LEARN SUIT: CSS naming conventions
SUIT CSS: NAMING CONVENTIONS
SUIT CSS relies on structured class names and meaningful hyphens. github.com/suitcss/suit/blob/master/doc/naming-conventions.md
SUIT CSS: STYLE TOOLS FOR UI COMPONENTS
SUIT CSS is a reliable and testable styling methodology for component-based UI development. suitcss.github.io
https://github.com/suitcss/suit/blob/master/doc/naming-conventions.mdhttps://suitcss.github.io/
-
Are you also interested in learning
BOOTSTRAP 4POSTCSS?+
http://inarocket.teachable.com/courses/css-postcssPlease visit:
http://inarocket.teachable.com/courses/css-postcsshttp://inarocket.teachable.com/courses/css-postcss
-
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
http://www.inarocket.comhttp://miguelsanchez.com
-
inarocket.com
Learn at rocket speed
SUITCSS NAMING CONVENTION
