We are proud to be distributing it. Clue them in that all they need to do is create an account on pragprog. Manage your subscription using your account , or permanently unsubscribe here. Having trouble reading this email?
View it in your browser. Explore It! Tell your friends! Tweet this Follow on Twitter: pragprog , pragpub Facebook: facebook. New This Week. It requires a very specific structure that would be hard to change. The selector has now been reduced to a depth of applicability of two, which makes it much more flexible and modular.
First, child selectors limit the scope of selectors. Instead of a push for more classes, it urges reorganisation of the same selectors you already use. Clarke suggests HTML should be structural. Tags, classes and IDs should refer to the content rather than how the content looks.
Selectors and definitions should be as global as possible for design consistency and in order to prevent specificity collisions. Every piece of knowledge must have a single, unambiguous and authoritative representation within a system. Unfortunately, this can typically lead to a lot of duplication of code within a project.
You start by identifying repeatable style patterns in your design and create a CSS style group with shared properties and values. For example, if some of your content boxes need to have a light background and dark text, you could set up the following box colour style group:. With the style group defined you give it a name by adding an uppercase ID and a lowercase class. The final step is to add whatever selectors will get the style.
These are added in between the ID and class name for the group:. Your CSS file would include a number of different style groups usually with more properties than shown here. Changing a design becomes a matter of rearranging, removing and adding selectors to the different style groups. For example, if the. Ideally each property : value pair should be used only once and never repeated.
Group names should encourage rational organisation of your design. This particular method also encourages optimisation and generalisation of the selectors. BEM comes to us from the developers of the Russian search engine Yandex, which has a connection to object oriented programming. In BEM, a block is its own independent entity. It can be simple or complex and one block can contain others. The highest level blocks on a website are your header, footer, sidebar, or main content.
Your header block may then include a search block or a navigation block and so on. Elements are parts of blocks, which perform certain functions. A search block may have two elements: an input field and a button. Elements are context dependent because removing them breaks the block.
All blocks and elements are arranged to create layouts. So, elements are arranged inside blocks and blocks are arranged inside other blocks working all the way up to the outermost container block. Every block and element should have a keyword a name that identifies it. Read the sections in sequence or out of order or pick and choose what seems most relevant to you.
You can reach me on my blog at Snook. Privacy Policy Terms and Conditions Contact. Sign in. Inspiration In trying to learn more about what does and doesn't work in maintaining larger projects, I looked at how others were trying to solve similar problems. Now get started and dive in!
0コメント