en introduktion til bem - metode,,,,, lad os se det i øjnene, vi ønsker alle at gøre vores kode lettere at læse.det hjælper os arbejde mere effektivt og hurtigt, og når andre arbejder med os, vi kan bevare overskueligheden og sammenhængende semantik.i disse dage ser der ud til at være så mange standarder og betingelser for css verden: oocss, smacss, ja og mere!disse er alle metoder til at forbedre css struktur, og i dag skal vi dække bem.,, ja står for, block element transformer.  , tyder det på en struktureret måde, at dine klasser på grundlag af egenskaber for det pågældende element.hvis du nogensinde har set en klasse navn, som header__form-email, det er blevet i aktion.ved anvendelse af bem - metode, bliv ved med at bemærke, at vi anvender kun klasse navne (ids).klasse navne giver dig mulighed for at gentage bem - navn, hvis det er nødvendigt, og skabe en mere konsekvent kodningssystem (både i html og css /sass filer).lad os bryde det ned.,, block,,, block, beholderen eller sammenhæng, hvor det element, befinder sig i.tænk på det, som de store strukturelle dele af din kode.du har måske en overskrift, fod, samråd og vigtigste område, som hver, ville blive betragtet som en blok.se på billedet nedenfor:,,,,, block element er roden til den klasse, og som altid vil gå først.jeg ved, at når man har defineret deres blok, er du klar til at begynde at din elementer.,, element, element er, et stykke af en blok.blokken er hele og elementer er i stykker.hvert element er skrevet efter blok i forbindelse med to understreger,.,,. block__element,, jeg ved, det ser lidt underligt, men når du begynder at bruge det, du vil vide, hvordan du nogensinde skrev css uden den!den dobbelte understreger, kan du hurtigt og visuelt navigere og manipulere din kode. her er nogle eksempler på, hvordan element metode virker:,,. header__logo {}. header__tagline {}. header__searchbar {}. header__navigation {}, som du kan se, er der plads til kreativitet og gøre denne metode, din egen."navigation" ændres til "andre", "tema" ændres til "mærke" eller "ide".pointen er at holde de navne, enkelt, klart og præcist.jeg ved hvad du tænker, og fordi din stylesheets og html bliver tørt (ikke gentager sig selv).det burde ikke være et problem at ajourføre klasse navne, når du finder et bedre ord, der arbejder for dig (forsøger bare at holde sig til det.. elementer vil gøre kernen i din klasse navne, som hjælper dig med at forstå, hvordan din stylesheets til struktur, og hvordan til at forvalte deres layout.,, modifikatorer, nu, det bliver sjovt, hvis du ikke var sjovt.)når du navn en klasse, og hensigten er at gøre dette element gentages, så du behøver ikke skrive nye klasser i andre områder af lokaliteten, hvis de elementer, styles, er de samme.når du har brug for at ændre stil et specifikt element, man kan bruge en transformer (naturligvis!)for at gøre dette, kan du tilføje en dobbelt bindestreg, - - efter element (eller blokere).her er et kort eksempel,. block... transformer {}. block__element... transformer {}, vær forsigtig med disse!husk, du vil holde det enkelt og ikke behøver at gentage dig selv eller skabe ekstra timer, medmindre det er absolut nødvendigt.lad os snakke om det med kode med hovedet af lokaliteten som vores blok:,,. header__navigation {}. header__navigation - sekundære {},, hvis du bruger en sekundær sejlads, er det sandsynligt, at udformningen og afstand er den samme, men sekundære navigation er af en anden farve.du kan enten overlapper de oprindelige styles, eller endnu bedre, så brug en preprocessor.  med frækhed, ville du, @ udvide, det vigtigste element (så de sekundære element arver alle egenskaber) og ændre de relevante styles.,,. header__navigation {baggrund:cba; polstring: 1rem 0; margen: 2rem 0; tekst omdanne: store;}. header__navigation - sekundære {@ udvide. header__navigation; baggrund:&#dfe0e0;}, tænker du måske, "men klasse navn er så længe!"jeg ser sådan på det: bem - klasse navne er specifikke, klare, let at læse i html og klart meddele, hvad de er til.,, hvad jeg også om bem - klasse navne er, at de kun skal bruge en klasse navn for hver html navneskilt.se på, hvordan man kan arbejde for etiketter.standard selektorer:,,. etiket. etiket misligholdelse {} {etiket}.. indberetning, vs. bem selektorer:,,. etiket}. etiket - alarm {}, sprog, som nu (scss specifikt) gør det muligt for os at hurtigt har elementer har samme arrangementet med små undtagelser.nedenstående eksempel forhindrer os i at duplikere styles, men at vi skifter bare, hvad der er nødvendigt.det jeg kan lide ved bem - metode er, at jeg ikke behøver at kombinere tvetydige klasser som "panel panel misligholdelse col-md-3".hvis du bruger en ramme som grundlag, kan du begynde at udnytte mixins.men for et enkelt eksempel, så stil dem, etiketter og mærkesedler af vi bare defineret.,,. etiket baggrund:&#eee grænse radius: 505, farve:ō og skriftstørrelse: 1rem;}. etiket - indberetning (@ udvide. etiket; baggrund:&#da4531; farve: fff), #; konklusion, så der har du det, ja i en nøddeskal.som du kan se, er der så meget mere at udforske.ja, en stadig større system, der giver dig mulighed for at bringe klarhed over din kode, og hjælper dig med at definere og indføre hierarki for din front end udvikling.  , fra min personlige erfaring, det har hjulpet mig meget på at fremstille prototyper mere effektivt, og overgang til produktion kode endnu hurtigere. , mere læsning,,, ja hjemmeside, mindbemding – at få hovedet rundt bem - syntaks, en ny front metode: ja,,, hvad er dine tanker om bem, har et godt råd, tips og tricks for dine kolleger tuts + læsere?lad os vide, i bemærkningerne nedenfor.,