Niet exact BEM; ik was al een tijdje bezig met onderzoeken hoe ik het beste mijn CSS zou kunnen indelen en kwam langzamerhand op deze manier uit. Pas later ontdekte ik BEM. Het komt grotendeels overeen, alleen gebruik ik niet al die funky scheidingstekens voor CSS classes die zij als voorbeeld tonen.
Zo is mijn navigatie met dropdown menu's (wat bij T.net bovenin de Nieuws, Reviews etc balk zou zijn, excl. logo) bijv. een samenstelling van
.navigation
.navigation-menu
.navigation-menu-item
.navigation-menu-item-with-submenu
.navigation-submenu
.navigation-submenu-item
De navigatie zit weer in de header, dus die heeft iets als:
.header
.header-logo
.header-logo-image
.header-navigation-wrapper (hierin zit dan de .navigation)
.header-actions-wrapper (voor eventuele zaken die rechts uitgelijnd zijn zoals inloggen e.d. op t.net)
Ik vermijd het gebruik van:
- meer dan 1 classname per element (dus niet zoals bootstrap .btn.btn-default.btn-large... CSS debug hel)
- IDs in CSS (wel in JS)
- CSS declaraties met nested elementen
Ik maak wel gebruik van nested CSS declaraties wanneer er bijv. user-generated content in een container getoond moet worden. Zo is er bijv. een markdown editor in het adminpaneel die simpelweg H1, H2, P, enz uitpoept. In de SCSS geef ik dan styles aan de HTML elementen binnen een container element met een classname die vaak het woord "fragment" bevat, zoals bijv. een klein tekstje in de footer:
code:
1
2
3
4
5
| .footer-fragment {
p { ... }
h1 { ... }
h2 { ... }
} |
Ook maak ik soms gebruik van classnames die vanuit JS gezet kunnen worden. Dit is de enige situatie waarin meerdere classnames op een element gezet mogen worden. Ik gebruik hiervoor vaak een enkel woord, zoals "open" of "active". In mijn SCSS voeg ik dan eventuele wijzigingen toe aan de styles voor elementen binnen het element met zo'n "modifier". Realistisch voorbeed:
code:
1
2
3
4
5
6
| .navigation-menu-item-with-submenu {
...
&.open .navigation-submenu { display: block; }
}
.navigation-submenu { display: none; } |
Ik weet echter nog niet of ik hier 100% tevreden mee ben. Zo stoor ik me aan de volgorde van de CSS declaraties (alle declaraties onder &.open moet eigenlijk onderaan naar mijn idee, gezien deze styles "overschrijven")
Ook twijfel ik nog over de naam conventie van mijn classes. Ik heb er ook aan gedacht om i.p.v. "open" iets als ".navigation-menu-item-with-submenu-open" op het element erbij te zetten, maar dan krijg je echt idiote classnames. Bovendien is dat niet consistent met mijn regel om meer dan 1 classname per element toe te wijzen: De naam ".navigation-menu-item-with-submenu-open" geeft de indruk dat deze classname ook op zichzelf gebruikt kan worden, terwijl dat niet zo is.
Een ander alternatief is om de classname ".navigation-menu-item-with-submenu" te vervangen door ".navigation-menu-item-with-submenu-open" en weer terug bij het schakelen van het submenu. Dit is in de JS echter weer wat complexer.
Ook wil ik vermijden dat die classnames veelvoudig voorkomen in CSS/JS: Het liefst zie ik iedere classname maximaal 1x in een CSS en JS file. Zodra een classname meervoudig voorkomt in een CSS of JS file, wordt het beheer ervan al gauw lastiger. Mocht het toch voorkomen (regelmatig) dat een classname vaker dan eens gebruikt wordt in een CSS/JS file, dan wil ik dat ze niet ver uit elkaar liggen, zodat je ze in ieder geval direct bij elkaar kan zien in de sourcecode.
[
Voor 52% gewijzigd door
Gamebuster op 01-05-2015 10:06
]
:strip_icc():strip_exif()/u/190884/dug.jpg?f=community)
Het is ook maar een applicatie van nog geen 200 mb. Hopelijk wel in de toekomst gewoon Xcode overboord gooien voor Visual Studio om iOS apps in te ontwikkelen ook. 
:strip_exif()/u/316566/crop570109b769a18_cropped.gif?f=community)
:strip_icc():strip_exif()/u/226826/aardblij-60.jpg?f=community)
/u/19474/avatar2015.png?f=community){kind=avatar}
:strip_exif()/u/316162/TweakersAvatar_Smallgif.gif?f=community){kind=avatar}
:strip_exif()/u/267916/gif_70x53_b432ec.gif?f=community)
/u/39688/AnnoAvatarSmall.png?f=community){kind=avatar}
:strip_icc():strip_exif()/u/36003/crop584e9e5c223bd.jpeg?f=community)
/u/117810/cupcake2.png?f=community)
/u/262016/crop64ed94e1a7757_cropped.png?f=community)
/u/89535/crop56f4e5c063de4.png?f=community)
:strip_icc():strip_exif()/u/111986/03042010122s.jpg?f=community)
:strip_exif()/u/306933/ezgif.com-optimize.gif?f=community)
/u/200133/artemis_square_e_60-60.png?f=community)
:strip_exif()/u/294184/20150204_SITE_GIF_VALKUIL-resized.gif?f=community)
of /u/24798/60x60.png?f=community)
/u/470671/elephant.png?f=community)
:strip_icc():strip_exif()/u/87691/avatar_alex.jpg?f=community){kind=avatar}
/u/3813/100_8985_ICON2.JPG?f=community)
/u/373849/cowava2.png?f=community)
:strip_icc():strip_exif()/u/12461/crop65b195553d948.jpg?f=community)
:strip_exif()/u/89852/avatar_hond_96x96.gif?f=community){kind=avatar}
:strip_icc():strip_exif()/u/180657/texacoiq2.jpg?f=community)
:strip_exif()/u/62716/avatar.gif?f=community){kind=avatar}
:strip_exif()/u/14385/malibu.gif?f=community)
/u/105842/Homer_60x60.png?f=community)
:strip_icc():strip_exif()/u/206968/325134.jpg?f=community)
/u/296460/beaker_s.png?f=community)
/u/48320/kenshin60.png?f=community)
/u/155568/usericon.png?f=community)
:strip_icc():strip_exif()/u/73625/Tetris_failure_ava_forum.jpg?f=community)
:strip_exif()/u/33451/kirk_bones.gif?f=community)
:strip_icc():strip_exif()/u/315253/boy-tweakers.jpg?f=community)
/u/262310/ava.png?f=community)
:strip_icc():strip_exif()/u/304716/enforcer_small.jpeg?f=community)
:strip_icc():strip_exif()/u/246777/crop5665347035c66.jpeg?f=community)
:strip_exif()/u/11775/SoulTaker.gif?f=community)
:strip_exif()/u/138622/kikker.gif?f=community)
:strip_exif()/u/47168/loop.gif?f=community)
Dit topic is gesloten.
