This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent and modular way. It explains the basic concepts of BEM including blocks, elements, and modifiers. It also discusses how to implement BEM through CSS naming conventions and provides examples. Best practices for using BEM with HTML, CSS, JavaScript, file structure, and build processes are covered. The goal of BEM is to provide a common semantic framework for building user interfaces and managing front-end code.
An in depth introduction to the BEM methodology and how to use it in the wild. The slides cover the key concepts of Block-Element-Modifier as well as their usage in HTML and CSS. Furthermore the presentation covers on how BEM can solve well-known CSS challenges.
An in depth introduction to the BEM methodology and how to use it in the wild. The slides cover the key concepts of Block-Element-Modifier as well as their usage in HTML and CSS. Furthermore the presentation covers on how BEM can solve well-known CSS challenges.
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
Presentasjon holdt under Geek Girls Dinner Oslo hvor vi presenterer noen eksmpler på hvordan vi har fått brukerens stemme inn som en del av produktutviklingen.
Du kan lese mer om dette på bloggen http://tech.finn.no
An approach for managing and semantically enriching the publication of Linked...greco_ufrj
With the growth of e-government programs, the available data to citizens is growing in volume every day. However, to make these data a useful source of information, to be referenced and integrated more easily by different applications, they should be published according to the best practices of
Linked Open Data, using standards for description (RDF) and identification
(URI) of data resources on the web. The main goal of this work is to propose a
platform and approach to support the exposure, sharing and association of
data resources in the form of Linked Open Data, offering a user-friendly environment to stimulate the publication of data and their association to other
existing data. Central functionalities to be included are data cleaning, transformation, linking, annotation and referencing to terminology mechanisms.
http://andrefreitas.org/papers/SBBD-Workshop-eGov-preprint.pdf
Kelli de Faria Cordeiro, Fabricio Firmino de Faria, Bianca de Oliveira Pereira, André Freitas, João Vitor Villas Boas Freitas, Ana Christina Bringuente, Lucas de Oliveira Arantes, Rodrigo Calhau, Veruska Zamborlini, Maria Luiza Machado Campos, Giancarlo Guizzardi, An Approach for Managing and Semantically Enriching the Publication of Linked Open Governmental Data, 3rd Workshop of Applied Computing in Electronic Government (WCGE), In WEBMEDIA/SBBD, 2011
Pemanfaatan ekstrak serai(sitronela) sebagai pengusir nyamukMuhammad Syahida
Komponen kimia dalam minyak serai wangi cukup komplek, namun yang terpenting adalah senyawa stironela dan geraniol. Keduanya menentukan intensitas bau harum serta nilai harga minyak serai wangi
Este es uno de los estudios científicos, recientemente publicados, que se ha enfocado en registrar la cantidad del compuesto 4-Metilidimazol que se encuentra en las bebidas de Cola y en la cerveza oscura. El compuesto 4-Metilidimazol es un subproducto cancerígeno que se encuentra en el colorante Caramelo IV utilizado en estas bebidas. El estudio reconoce que la mayor ingesta que se da de este compuesto es a través de las bebidas de Cola. Estima que en los Estados Unidos el consumo promedio diario de bebidas de Cola puede representar una ingesta de 342 microgramos diarios de 4-Metilidimazol. Esta cantidad significa varias veces el nivel máximo recomendado como seguro de ingesta de este compuesto sugerido por la autoridad de California, para todo un día que es de 16 microgramos al día. El estudio reporta que una sola lata de bebida de Cola puede contener entre 12.95 y 214.55 microgramos de 4-Metilidimazol.
In this presentation we will go through how anyone with a WordPress site can make their editing process more efficient by using block patterns … and how anyone who can do a little bit of coding can create their own set of custom block patterns and wrap it all up in a little plugin.
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
In this session, learn how to build and maintain standards-based sites that work great in IE7. Learn how to take advantage of new capabilties such as better HTML and CSS standards support, RSS and Search integration, and new security features.
In this presentation, you may find necessary information to engage in custom design integration on Magento:
- standard development workflow
- working environment preparation
- layout comprehension
- introducing blocks
- understand header and footer elements
Front end workflow Presentation at Coffee@DBG by Praveen VijayanDeepu S Nath
The primary objective of this presentation is to get an idea about end-to-end front-end workflow and useful tools. We will discuss hot tools like Yeoman, Grunt and Bower. But the session is not limited to these tools - we will touch each phase of front-end development like boiler-plating, preprocessors, performance, documentation, code quality, reporting and architecture etc.
Presentation for EAAA ITDays October 2012.
Introducing the Magento eCommerce platform on conceptual level and the practical level, taking both administration and development into consideration.
We are all familiar with the common interface development process which is:
* first, preparing an interface layout by a designer;
* then, making an HTML/CSS dummy;
* next, adding some JavaScript tricks with a help of JavaScript ninja;
* and, finally, having a server guy operating on templates and doing all the integration stuff.
Even while sometimes all these things are done by the same person, these are different roles and different project stages, and you switch from stage to stage to complete the development cycle.
When looking for performance gains, people often try to achieve that by changing the way the process is managed.
This presentation is about is a completely different approach which changes development from within. The goal is to convert a flat process with distinct stages into a continuous, uninterrupted development flow.
You can achieve this by decomposing a web interface into independent pieces (the so-called blocks), once and for all, and use them to build interfaces the same way bricks are used to build a house.
Thus, each of these interface components can be developed separately, which allows maintenance, refactoring and redesign to happen simultaneously on different interface parts, whenever necessary. You are not tied to a specific stage of project development anymore.
To make this happen, there are several principles you can follow:
1. Special project file structure, where files are stored the way the whole project can be built from components;
2. CSS guidelines that allow an interface piece to fit anywhere on any page without affecting other pieces;
3. In JavaScript, your functionality can be described in a highly semantic way usually unavailable with any other common approach.
All this magic is called BEM, which stands for Block, Element, and Modifier.
With my presentation, this technology will be revealed in greater detail, and magic explained bit by bit.
BEM. What you can borrow from Yandex frontend devVarya Stepanova
Varvara Stepanova presents BEM methodology and tools.
BEM stans for "Block Element Modifier".
First, it is a methodology, a way of thinking when developing web interface applicable for any technology.
Besides, BEM is a range of tools to automate developer's work and to optimase code for production.
Finnally, BEM is a bunch of interface libraries helping developers to make their work faster and better.
Informal video: https://vimeo.com/53219242
A review on techniques and modelling methodologies used for checking electrom...nooriasukmaningtyas
The proper function of the integrated circuit (IC) in an inhibiting electromagnetic environment has always been a serious concern throughout the decades of revolution in the world of electronics, from disjunct devices to today’s integrated circuit technology, where billions of transistors are combined on a single chip. The automotive industry and smart vehicles in particular, are confronting design issues such as being prone to electromagnetic interference (EMI). Electronic control devices calculate incorrect outputs because of EMI and sensors give misleading values which can prove fatal in case of automotives. In this paper, the authors have non exhaustively tried to review research work concerned with the investigation of EMI in ICs and prediction of this EMI using various modelling methodologies and measurement setups.
Hierarchical Digital Twin of a Naval Power SystemKerry Sado
A hierarchical digital twin of a Naval DC power system has been developed and experimentally verified. Similar to other state-of-the-art digital twins, this technology creates a digital replica of the physical system executed in real-time or faster, which can modify hardware controls. However, its advantage stems from distributing computational efforts by utilizing a hierarchical structure composed of lower-level digital twin blocks and a higher-level system digital twin. Each digital twin block is associated with a physical subsystem of the hardware and communicates with a singular system digital twin, which creates a system-level response. By extracting information from each level of the hierarchy, power system controls of the hardware were reconfigured autonomously. This hierarchical digital twin development offers several advantages over other digital twins, particularly in the field of naval power systems. The hierarchical structure allows for greater computational efficiency and scalability while the ability to autonomously reconfigure hardware controls offers increased flexibility and responsiveness. The hierarchical decomposition and models utilized were well aligned with the physical twin, as indicated by the maximum deviations between the developed digital twin hierarchy and the hardware.
HEAP SORT ILLUSTRATED WITH HEAPIFY, BUILD HEAP FOR DYNAMIC ARRAYS.
Heap sort is a comparison-based sorting technique based on Binary Heap data structure. It is similar to the selection sort where we first find the minimum element and place the minimum element at the beginning. Repeat the same process for the remaining elements.
Understanding Inductive Bias in Machine LearningSUTEJAS
This presentation explores the concept of inductive bias in machine learning. It explains how algorithms come with built-in assumptions and preferences that guide the learning process. You'll learn about the different types of inductive bias and how they can impact the performance and generalizability of machine learning models.
The presentation also covers the positive and negative aspects of inductive bias, along with strategies for mitigating potential drawbacks. We'll explore examples of how bias manifests in algorithms like neural networks and decision trees.
By understanding inductive bias, you can gain valuable insights into how machine learning models work and make informed decisions when building and deploying them.
Literature Review Basics and Understanding Reference Management.pptxDr Ramhari Poudyal
Three-day training on academic research focuses on analytical tools at United Technical College, supported by the University Grant Commission, Nepal. 24-26 May 2024
Using recycled concrete aggregates (RCA) for pavements is crucial to achieving sustainability. Implementing RCA for new pavement can minimize carbon footprint, conserve natural resources, reduce harmful emissions, and lower life cycle costs. Compared to natural aggregate (NA), RCA pavement has fewer comprehensive studies and sustainability assessments.
ACEP Magazine edition 4th launched on 05.06.2024Rahul
This document provides information about the third edition of the magazine "Sthapatya" published by the Association of Civil Engineers (Practicing) Aurangabad. It includes messages from current and past presidents of ACEP, memories and photos from past ACEP events, information on life time achievement awards given by ACEP, and a technical article on concrete maintenance, repairs and strengthening. The document highlights activities of ACEP and provides a technical educational article for members.
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECTjpsjournal1
The rivalry between prominent international actors for dominance over Central Asia's hydrocarbon
reserves and the ancient silk trade route, along with China's diplomatic endeavours in the area, has been
referred to as the "New Great Game." This research centres on the power struggle, considering
geopolitical, geostrategic, and geoeconomic variables. Topics including trade, political hegemony, oil
politics, and conventional and nontraditional security are all explored and explained by the researcher.
Using Mackinder's Heartland, Spykman Rimland, and Hegemonic Stability theories, examines China's role
in Central Asia. This study adheres to the empirical epistemological method and has taken care of
objectivity. This study analyze primary and secondary research documents critically to elaborate role of
china’s geo economic outreach in central Asian countries and its future prospect. China is thriving in trade,
pipeline politics, and winning states, according to this study, thanks to important instruments like the
Shanghai Cooperation Organisation and the Belt and Road Economic Initiative. According to this study,
China is seeing significant success in commerce, pipeline politics, and gaining influence on other
governments. This success may be attributed to the effective utilisation of key tools such as the Shanghai
Cooperation Organisation and the Belt and Road Economic Initiative.
3. There is no unified semantic model
across different FE technologies
● HTML stands for hypertext
I've heard we mostly do web apps...
● CSS offers no structure out of the box
Usually a pile of rules put together. Sorry.
● JavaScript uses its own approaches.
...a new one comes with every framework.
4. Frameworks are not enough
● ≈ 8,500 packages in Bower registry
● JavaScript:
the most popular language on GitHub
Repositories created:
≈ 264,000 in 2013
≈ 296,000 in 2012
6. What is BEM?
BEM claims that simple semantic model
(Blocks, Elements, and Modifiers)
is enough to define the way you author
HTML / CSS / JavaScript, structure code
and components, set up interaction
and scale your project to build
an industry-leading service.
7. What is BEM?
● BEM is a methodology, not a framework
Semantic model + best practices
for all things frontend
● BEM is a fix for web app semantics
...the same as jQuery is a fix for DOM APIs
● Originally introduced by Yandex
— 19 million daily audience
— 200+ web services
— tools, code, tutorials, conferences
— open source
9. What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu
10. What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu
– Re-usable in different contexts
– Self-sufficient
11. What is BEM?
ELEMENT
– An integral part of a block:
● button
● text field
● flyout
● heading
● menu
12. What is BEM?
ELEMENT
– An integral part of a block:
● button — contains no elements
● text field label
● flyout title
● heading logo
● menu item
13. What is BEM?
ELEMENT
– An integral part of a block:
● button — contains no elements
● text field label
● flyout title
● heading logo
● menu item
– No standalone meaning outside of a block
– Some blocks have no elements
14. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button
● text field
● flyout
● heading
● menu item
15. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button theme
● text field editable state
● flyout alignment
● heading level
● menu item bullet type
16. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button theme
● text field editable state
● flyout alignment
● heading level
● menu item bullet type
– Multiple modifiers may co-exist
on a single block/element
17. BEM forms a semantic overlay over
the existing DOM structure.
This overlay is called a BEM tree.
19. How does BEM map to DOM?
● Blocks/elems/mods are denoted
with CSS classes using a naming convention.
● DOM nodes can be shared:
— block1 + block2 may occupy the same
container;
— element1 + block2 may co-exist on
the same node.
● DOM is encapsulated:
— complex DOM structure may constitute
a single element
20. BEM HOWTO
for your beloved project
with benefits explained
32. BEM CSS: best practices
1. Map the whole document to BEM blocks
2. No CSS outside of blocks
3. Independent blocks → no global CSS resets
33. Benefits!
Drop tag names and IDs
● Faster selectors
● Re-use same semantics on any tag:
— <DIV class=”block”>
— <SPAN class=”block”>
— <TABLE class=”block”>
34. Benefits!
Bye-bye CSS cascade?!
Only one CSS class needed to:
● style a block container
● style any element within a block
● add extras/overrides with a modifier
Doesn't it cover 90% of your styling needs?
35. Benefits!
CSS specificity magic solved
Priority of CSS rules:
by specificity first, then by rule order
td.data { background-color: gray }
td.summary { background-color: white }
.total-summary { background-color: yellow }
<TD class="summary total-summary">
<!-- Still gray, baby :-( -->
</TD>
36. Benefits!
CSS specificity magic solved
Priority of CSS rules:
by specificity first, then by rule order
td.data { background-color: gray }
td.summary { background-color: white }
td.total-summary { background-color: yellow }
<TD class="summary total-summary">
<!-- This works, I'm yellow now -->
</TD>
37. Benefits!
Bye-bye CSS cascade?!
...well, not exactly.
Example of an element affected by a block modifier:
/* theme menu items for a dark theme */
.menu_theme_dark .menu__item
{
color: white;
background-color: darkgray;
}
46. JavaScript deals with BEM
blockObj
blockObj.setMod('active');
// <div class=”block block_active”>
blockObj.delMod('active);
// <div class=”block”>
47. JavaScript deals with BEM
BlockObj.do({
'active': function() {
// do smth when active
},
'disabled': function() {
// do something when disabled
}
});
48. JavaScript
i-bem.js framework by Yandex + tutorial
http://bit.ly/bem-js-tutorial/
● First English docs (expect more!)
● 100% BEM-based declarative API
● Part of a larger bem-core library
53. UX + Frontend
● Live style guide
● Always up-to-date
● Prototyping mapped to code from
day one
● Designers and devs speak the same
language
● Good for making early estimates
55. File and folder structure
Flat block structure with a folder for each block.
Simple structure for BEM beginners:
/block
block.css
block.js
block.tpl
...whatever you need
56. File and folder structure
Advanced structure to expose semantics
/block
/__elem1
block__elem1.css
block__elem1.tpl
/_mod
block_mod.css
block.css
block.js
block.tpl
58. Build process and deployment
Use a build tool!
Borschik:
an open-source build tool by Yandex
Code:
https://github.com/bem/borschik
English docs:
http://bem.info/articles/borschik
59. Build process and deployment
Any familiar tool can be a builder
Gulp:
Example:
https://github.com/getbem/getbem.com
60. BEM gives answers to:
1. Where is code for this interface object?
●CSS
● JS
●Templates
●Documentation
2.Can I remove this piece of code?
3.How do I name this new item?