Tôi không thực sự chắc chắn đó là tiêu đề chính xác, nếu không xin vui lòng thay đổi nó. Tôi không phải là người nói tiếng Anh bản xứ, vì vậy tôi sẽ cố gắng hết sức mình để giải thích với sự giúp đỡ của một pic:Tạo trừu tượng với CSS
phép giả định rằng, tôi có một tập tin HTML đơn giản. Tệp này sử dụng các nút và sử dụng một số thư viện giao diện người dùng (như Yahoo Pure). Nhưng thay vì sử dụng các lớp của Pure, tôi sử dụng các lớp của riêng mình, cho phép gọi nó là myButton, trong đó sử dụng thuần CSS thuần túy (hoặc bất kỳ loại nào khác). Nhưng bằng cách nào ?
Ở đây tôi đang cố gắng tạo một lớp trừu tượng để tệp css của tôi có thể sử dụng một số thư viện giao diện người dùng khác nhau (có thể là bootstrap, tinh khiết hoặc nền tảng) & mã vẫn hoạt động.
Nếu không có giải pháp này, tôi sẽ làm như thế này (mã ban đầu của tôi sẽ được):
<html>
<head>
<link rel="stylesheet" href="http://yahoo-pure.com/pure-min.css">
</head>
<body>
<button class="pure-button" type="button">Some Button</button>
</body>
</html>
Sau đó, nếu tôi có sự thay đổi của tôi về tim và quyết định sử dụng bootstrap:
<html>
<head>
<link rel="stylesheet" href="http://twitter-bootstrap.com/bootstrap.css">
</head>
<body>
<button class="btn" type="button">Some Button</button>
</body>
</html>
Vì vậy, tôi phải thực hiện hai thay đổi ở đây, một là nguồn css tập tin (không phải là một vấn đề lớn) và lớp cho nút (một vấn đề rất lớn nếu mã là lớn). (Hãy tưởng tượng những thay đổi tôi phải làm nếu tôi tận dụng lưới & chất liệu khác)
gì nếu tôi có thể làm điều gì đó như thế này:
<html>
<head>
<link rel="stylesheet" href="my-magic-stylesheet.css">
</head>
<body>
<button class="myButton" type="button">Some button</button>
</body>
</html>
Vì vậy, khi tôi cảm thấy như chuyển từ Bootstrap thành Pure, tôi chỉ thực hiện các thay đổi bên trong my-magic-stylesheet.css & nó vẫn hoạt động. Tệp HTML của tôi đề cập đến my-magic-stylesheet.css và my-magic-stylesheet.css có thể tham chiếu đến bất kỳ thư viện nào tôi chỉ định.
Một giải pháp xuất hiện trong tâm trí của tôi là khá đơn giản, tôi viết một tập lệnh python. Trước tiên, tôi lưu ý các lớp khác nhau và thư viện UI tương ứng của chúng. Sau đó, tôi sẽ viết một CSS, trong đó tôi sẽ sử dụng tên lớp chung chung như myButton. Sau đó, tôi sẽ cung cấp css này cho kịch bản lệnh của tôi với tên của thư viện UI làm đầu vào khác. Tập lệnh sẽ chạy qua tệp css & thực hiện các thay đổi cho phù hợp. (như thay đổi myButton thành btn nếu một đầu vào khác cho tập lệnh là bootstrap)
Nhưng có cách tiếp cận nào tốt hơn cho điều này không? Có thể được mà không cần sử dụng kịch bản python? Hoặc bất kỳ giải pháp mà đến với tâm trí của bạn? Tôi cũng mới sử dụng các công cụ CSS như LESS/SASS. Tôi có thể sử dụng chúng trong anyway để giải quyết vấn đề của tôi?
bạn nên đặt biểu định kiểu đó theo kiểu người bạn muốn ưu tiên cuối cùng – Hushme
có thể làm như: class = 'pure-button btn'? – gen
@Hushme - Không, điều đó sẽ không giải quyết được vấn đề của tôi. Tôi phải thay đổi tên lớp quá – avi