natalia sivackova css class naming & bem · css class naming & bem smacss categorises css...
TRANSCRIPT
CSS CLASS NAMING & BEMNatalia Sivackova
1
CSS CLASS NAMING & BEM
CONTEMPORARY PRACTICE - A FEW THINGS TO REMEMBER
▸ Improve your naming so that everyone understands
▸ Keep in mind that others are looking at your project
▸ Keep naming consistent, as if one person typed it
▸ Avoid over-engineering or prematurely optimising code
▸ Avoid bloating markup
▸ Check your HTML and CSS after finishing, you will have to adjust class names
▸ When in doubt, use comments!
2
DO’S AND DONT’SCSS CLASS NAMING
CLASSITIS IS THE MEASLES OF MARKUP, OBSCURING MEANING AS IT ADDS NEEDLESS WEIGHT TO EVERY PAGE.
Jeffrey Zeldman
CSS CLASS NAMING & BEM 4
CSS CLASS NAMING & BEM
DON’TS
▸ Afflict your site with classitis
▸ Use capital letters or camel case (in CSS)
▸ Use presentational names if you don’t have to
.green-button { }
▸ Try to avoid content-based names if you can because they change. Use something abstract instead
.intro-text { } /* DON’T */
.entries { } /* DO */
5
CSS CLASS NAMING & BEM
MORE DON’TS
▸ Abbreviate, apart from classics: .nav, .txt, .url, .btn
▸ Use more than two words
.dropdown-button-part-one { } /* DON’T */
.dropdown-button { } /* DO */
.button { } /* DO */
6
CSS CLASS NAMING & BEM
DO’S
▸ Use natural language
▸ Use functional class names (not always possible)
.positive-button { }
▸ Use content to think of a name
.header-logo { }
▸ Use nouns to name objects and modules: .menu, .button, .textbox
▸ Use adjectives to name states of an object: .left, .right, .block
7
CSS CLASS NAMING & BEM
MORE DO’S
▸ Name parent-child relationships
.tabs { }
.tab { }
▸ Use ARIA roles (Accessible Rich Internet Applications)
▸ Not just for accessibility
▸ Can be used to specify CSS
header [role=banner] { }
8
9
CSS CLASS NAMING & BEM
FREQUENTLY USED CLASSES - GOOD TO KNOW
.tabs
.dropdown
.thumbnail
.media
.label
.button or .btn
10
BEM, SMACSS AND OOCSSNAMING CONVENTIONS
CSS CLASS NAMING & BEM
CLASS NAMING CONVENTIONS
▸ BEM (Block Element Modifier)
▸ SMACSS (Scalable and Modular Architecture for CSS)
▸ OOCSS (Object Oriented CSS)
▸ Structures to naming our CSS classes
▸ Make you think in objects (small pieces of functionality - headers, buttons, footers, content areas)
▸ Applies to all projects
▸ Makes working in large groups easier
12
CSS CLASS NAMING & BEM
SMACSS
▸ Categorises CSS rules
▸ Base (html, body)
▸ Layout - divides page into sections (main, section, article)
▸ Module - reusable parts (p, h1, ul)
▸ State - how it will look (hidden, active)
▸ Theme - most sites don’t require this layer, describes how modules or layouts might look
▸ Uses these categories to target specific areas
13
CSS CLASS NAMING & BEM
OOCSS
▸ Focuses on reuse and less code
▸ “Skin”: a website’s colours, subtle uses of gradients, visible borders
▸ Used for repeated styles on a webpage
▸ For smaller projects, this could be overkill
▸ With some planning, you can just use
.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
}
14
CSS CLASS NAMING & BEM
WHAT CAN I TAKE AWAY FROM THIS?
▸ Try -like for reuse
h3, .h3-like { }
▸ Name your states
.is-activated { }
▸ Use prefixes. Example: Object
.o-button, .o-grid { }
15
LET’S TALK ABOUT BEMNAMING CONVENTIONS
CSS CLASS NAMING & BEM
BEM - WHAT?!
▸ Invented by Yandex
▸ No specific implementation
▸ Please do what works for you
▸ Used in major websites like BBC
▸ Only used on classes (not ID’s)
17
CSS CLASS NAMING & BEM
BEM - STILL WHAT?!
1. Block - Element that encompasses related elements (example: navigation)
2. Element - Composite part of the block that can’t be used separately from it (example: item)
3. Modifier - Controls the state, appearance or behaviour of the block or element (example: active)
.navigation { }
.navigation__item { }
.navigation__item—active { }
18
CSS CLASS NAMING & BEM
BLOCKS, ELEMENTS AND MODIFIERS
▸ Blocks don’t have to have elements
▸ Blocks can have nested blocks
▸ Blocks can have nested elements
▸ Elements have to have blocks
19
CSS CLASS NAMING & BEM
HOW TO BEM
__ Double underscore between block and element
— Double hyphen between element and modifier
.navigation { }
.navigation__item { }
.navigation__item—active { }
20
CSS CLASS NAMING & BEM
WHY DOES IT LOOK WEIRD?
▸ You want a consistent way of writing class names that everyone will understand
▸ Tells you how elements are related to each other
▸ Makes it clear how the HTML structure looks like
▸ Gives semantic freedom
▸ .navigation__item could be a direct child of .navigation, but doesn’t have to be
21
CSS CLASS NAMING & BEM
BENEFITS OF BEM
▸ Transparency and clarity in markup
▸ Emphasises readability and avoiding collisions
▸ Applies to all projects
▸ Makes working on large projects easier
▸ Easy reuse of code
▸ Can be a quick way to deliver prototypes
▸ Suitable for any programming language or framework
.menu__item—visible /* in CSS */
menuItemVisible /* in JavaScript */
22
CSS CLASS NAMING & BEM
BEFORE YOU START BEMING
▸ Make sure you plan what you can use as BEM modules
▸ Don’t enforce it strictly, don’t let it restrict you or make you feel like you have to use a strange pattern
▸ You can use BEM along with SMACSS and OOCSS, don’t restrict yourself!
▸ If this presentation makes you think about it, try it
23
LEARN MOREREFERENCES
CSS CLASS NAMING & BEM
NOTES AND REFERENCES BY SLIDE NUMBER
4: Jeffrey Zeldman, Designing with Web Standards, 1st ed.
5: More on do’s and don’ts: http://bdavidxyz.com/blog/how-to-name-css-classes/
8: ARIA roles: https://alistapart.com/article/meaningful-css-style-like-you-mean-it , Great source for ARIA roles and semantics: http://w3c.github.io/aria-in-html/#rule1
9: https://alistapart.com/article/meaningful-css-style-like-you-mean-it , Type attributes: https://www.w3schools.com/tags/tag_input.asp
12: BEM: https://en.bem.info
25
CSS CLASS NAMING & BEM
MORE NOTES AND REFERENCES BY SLIDE NUMBER
13: SMACSS online chapters from book: https://smacss.com/book/
14: All about OOCSS: http://oocss.org and https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
15: Also check out how to use the ampersand using SASS, could be useful: http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
17: BBC: http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d
19: https://en.bem.info/methodology/quick-start/
21: https://en.bem.info , http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem
23: Using both SMACSS and BEM: https://www.sitepoint.com/bem-smacss-advice-from-developers/
26
CSS CLASS NAMING & BEM
GENERAL REFERENCES - USEFUL LINKS FOR MORE KNOWLEDGE
▸ http://bdavidxyz.com/blog/how-to-name-css-classes/
▸ https://github.com/necolas/idiomatic-css
▸ https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard
▸ http://markrabey.com/2014/11/20/css-class-names/
▸ http://thesassway.com/advanced/modular-css-naming-conventions
▸ https://alistapart.com/article/meaningful-css-style-like-you-mean-it
▸ http://www.mattzeunert.com/slides/bem-ldn-ajax.pdf
27