CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
「CSSが難しい。。」「CSSが面倒。。」 と言ったエンジニアさんにもオススメのCSS設計！ 「APBCSS（Atomic Parts Base CSS）」が良い感じ！
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 「CSSが難しい。。」「CSSが面倒。。」 OOCSS、BEM、SMACSS… Layout、Component、module…. 「色々ありすぎてわかんねーよ！」「サクッと作れないよ。」「ルールが分かりづらい。。」 などなど、お困りのエンジニアさんにもオススメのCSSアーキテクチャが、 APBCSS となります！ APBCSS http://apbcss.com/ APBCSS は Atomic Parts Base CSSの略で「エーピービーシーエスエス」と呼びます。 その名の通り、Atomic Designが ベースとなるように設計されたCSSアーキテクチャの一つとなります。 Atomic Design http://bradfrost.com/blog/post/
APB CSS - Atomic Parts Base CSS -
What is Atomic Parts Base CSS(APB CSS) Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) Atomic Parts Base CSS(APB CSS)って何？？ Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) APBCSS は Atomic Parts Base CSSのそれぞれ頭文字を取っていて、「エーピービーシーエスエス」と呼びます。 APBCSS は Atomic Designをベースに設計された「CSSアーキテクチャ」の一つとなります。 Point - Simple - Predictable - General versatility - Reusable - Maintainabl
The BEMIT naming convention | James Turner
Tags: CSS HTML Giving this site a spring clean has been in my sights for some time. It's only when I take a look at the HTML and CSS (not Sass yet—that's pencilled in for later in the year) that I realise how difficult it is to organise and maintain, even on a small, one-person website like this. For example, there's a class that I simply called structure. Structure of what? I obviously wasn't fe
Basscss
Code with ConfidenceUsing clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code. No Side EffectsThings behave exactly as expected with immutable utilities and styles that do one thing well to help prevent common pitfalls with CSS. ComposableReusable, interoperable styles work like buil
More Transparent UI Code with Namespaces – CSS Wizardry
6 March, 2015 More Transparent UI Code with Namespaces Written by Harry Roberts on CSS Wizardry. Table of Contents The Namespaces Object Namespaces: o- Component Namespaces: c- Utility Namespaces: u- Theme Namespaces: t- Scope Namespaces: s- Stateful Namespaces: is-/has- Hack Namespaces: _ JavaScript Namespaces: js- QA Namespaces: qa- Handy Side Effects Detecting Namespaces Finding (In)valid Class
MindBEMding – getting your head ’round BEM syntax – CSS Wizardry
25 January, 2013 MindBEMding – getting your head ’round BEM syntax Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher… BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yand
The Future of OOCSS: A Proposal — Philip Walton
In CSS we often code the same visual components over and over again — even within the same project. It’s embarrassing how many separate times in my career I’ve coded a two-column layout, or tabbed navigation, or a dropdown menu, or a popup (and the list goes on). To deal with this problem Nicole Sullivan created the Object Oriented CSS (OOCSS) project. She suggests that instead of defining entire
CSS Architecture — Engineering Blog
To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You don't use tables, and you pride yourself on using as few images as possible. If you're really good, you use the latest and greatest techniques like media queries, transitions and transforms. While all this is certainly true of good CSS developers, there's an entirely separate side
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
Learning Principles for Improving Your CSS | Codrops
This article will cover some basic principles and tips on how to learn and become better at CSS, based on personal experience. In today’s article I will mostly talk about my own experience, and what I have learned about CSS after almost one year and a half of heavy practicing. First, let me remind you that CSS is an extremely simple language. It can be summed up in 3 words: selector, property, val
Object Oriented CSS – Compilation of Articles | 3D Models, Website Templates and Illustrations blog | Templates.com
Object Oriented CSS – Compilation of Articles November 7th, 2012 Object Oriented CSS is under our discussion today. What is it and what are its main points? OOCSS facilitates code reuse and, ultimately, allows to create much faster that ever more efficient stylesheets that are both easy to develop and maintain. Two main principles of OOCSS: 1. Separate structure and skin. 2. Separate container
Big CSS
Slides from Big CSS at Canvas Conf, Birmingham, 2012 Video: https://www.youtube.com/watch?v=R-BX4N8egEc&hd=1
An Introduction To Object Oriented CSS (OOCSS) — Smashing Magazine
Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site. From a Web developer’s perspective, however, some may argue that speed is king. More and more, I’m starting to favour that stance. In recent years many experi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
feb19
モダンなCSS設計パターンを考える
Architecting Scalable CSS
OOCSS + Sass
Canvas Conf, 2012 – CSS Wizardry